I'm trying to display a histogram using D3.

I started with the official example here and tried to change the scale of the x domain.

However, if I change the scale of the x domain, I get errors on the width of the individual histogram buckets.

The code in the example works (jsfiddle):

var x = d3.scale.linear()
  .domain([0, 1])
  .range([0, width]);

But this does not (jsfiddle):

var x = d3.scale.linear()
  .domain([0.2, 1])
  .range([0, width]);

Others have mentioned that, in order to zoom the x axis, you should use this:

var x = d3.scale.linear()
  .domain(d3.extent(data))
  .range([0, width]);

However, that's not possible since data has not been created yet, because data requires x:

var x = d3.scale.linear()
  .domain([60, 95])
  .range([0, width]);

// Generate a histogram using twenty uniformly-spaced bins.
var data = d3.layout.histogram()
  .bins(x.ticks(7))
  (values);

So how can I use data to create x if x is needed to create data?

Note that scaling the large side of the histogram does work:

var x = d3.scale.linear()
  .domain([0, Number(d3.max(values))])
  .range([0, width]);

However, if the small side is anything but zero, things break:

var x = d3.scale.linear()
  .domain([Number(d3.min(values)), Number(d3.max(values))])
  .range([0, width]);

I'm trying to display a histogram using D3.

I started with the official example here and tried to change the scale of the x domain.

However, if I change the scale of the x domain, I get errors on the width of the individual histogram buckets.

The code in the example works (jsfiddle):

var x = d3.scale.linear()
  .domain([0, 1])
  .range([0, width]);

But this does not (jsfiddle):

var x = d3.scale.linear()
  .domain([0.2, 1])
  .range([0, width]);

Others have mentioned that, in order to zoom the x axis, you should use this:

var x = d3.scale.linear()
  .domain(d3.extent(data))
  .range([0, width]);

However, that's not possible since data has not been created yet, because data requires x:

var x = d3.scale.linear()
  .domain([60, 95])
  .range([0, width]);

// Generate a histogram using twenty uniformly-spaced bins.
var data = d3.layout.histogram()
  .bins(x.ticks(7))
  (values);

So how can I use data to create x if x is needed to create data?

Note that scaling the large side of the histogram does work:

var x = d3.scale.linear()
  .domain([0, Number(d3.max(values))])
  .range([0, width]);

However, if the small side is anything but zero, things break:

var x = d3.scale.linear()
  .domain([Number(d3.min(values)), Number(d3.max(values))])
  .range([0, width]);

• javascript
• d3.js
• visualization
• histogram

1 Answer 1

The way you're puting the width of the bars is incorrect for your particular use case; in particular it results in negative widths (as the error message indicates). You need to take the width of the range and divide it by the number of items (minus a small number if you want gaps):

.attr("width", (x.range()[1] - x.range()[0]) / data.length - 2)

Complete demo here.