function histogramChart() {
var margin = {top: 0, right: 0, bottom: 20, left: 0},
width = 960,
height = 500;
var histogram = d3.layout.histogram(),
x = d3.scale.ordinal(),
y = d3.scale.linear(),
xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(6, 0);
function chart(selection) {
selection.each(function(data) {
// Compute the histogram.
data = histogram(data);
// Update the x-scale.
x .domain(data.map(function(d) { return d.x; }))
.rangeRoundBands([0, width - margin.left - margin.right], .1);
// Update the y-scale.
y .domain([0, d3.max(data, function(d) { return d.y; })])
.range([height - margin.top - margin.bottom, 0]);
// Select the svg element, if it exists.
var svg = d3.select(this).selectAll("svg").data([data]);
// Otherwise, create the skeletal chart.
var gEnter = svg.enter().append("svg").append("g");
gEnter.append("g").attr("class", "bars");
gEnter.append("g").attr("class", "x axis");
// Update the outer dimensions.
svg .attr("width", width)
.attr("height", height);
// Update the inner dimensions.
var g = svg.select("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Update the bars.
var bar = svg.select(".bars").selectAll(".bar").data(data);
bar.enter().append("rect");
bar.exit().remove();
bar .attr("width", x.rangeBand())
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("height", function(d) { return y.range()[0] - y(d.y); })
.order();
// Update the x-axis.
g.select(".x.axis")
.attr("transform", "translate(0," + y.range()[0] + ")")
.call(xAxis);
});
}
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
return chart;
};
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
// Expose the histogram's value, range and bins method.
d3.rebind(chart, histogram, "value", "range", "bins");
// Expose the x-axis' tickFormat method.
d3.rebind(chart, xAxis, "tickFormat");
return chart;
}