d3卡住直方图到轴

Question

Hi I've got this Histogram made with the d3 library: jsFiddle
It is zoomable, so you can also pan it. But I want the histogram to stuck at least to the xAxis so you can't pan into negative values. I've tried it by limiting the domain, what works for the axis, but doesn't effect the bars.

redraw {
...
xScale.domain()[0] = xScale.domain()[0] < 0 ? 0 : xScale.domain()[0];
xScale.domain()[1] = xScale.domain()[1] > data.length ? data.length : xScale.domain()[1];
yScale.domain()[0] = yScale.domain()[0] < 0 ? 0 : yScale.domain()[0];
yScale.domain()[1] = yScale.domain()[1] > d3.max(data) ? d3.max(data) : yScale.domain()[1];
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
vis.selectAll(".bar").attr("transform", "translate(" + zoombie.translate() + ")scale(" + zoombie.scale() + ")");
}

Can anybody help me?

Answer 1

I'm not very familiar with d3 but this previous answer should give you enough explanation to do what you are looking for.

here is the result of all those explanations

I hope this helps :)

Answer 2

On short order, here's what we got. First, all the attributes of your visualization except for width are defined in terms of scales. You need to fix this first and foremost, so that you don't have to rely on adding a scale and translation transformation to your bars to generate the desired zoom effect. There are a few ways to. It's preferable to use an ordinal scale , but again, short order. We're gonna write a function to do it instead:

function barWidth(d, i) {
  return (xScale(i + 1) - xScale(i)) * (data.length / (data.length + 1))
}

Go into your vis and replace widths that you're computing manually with that function.

Next, and I suspect this isn't exactly what you're looking for but it'll get you most of the way there, change your zoom definition to not include the yScale

var zoombie = d3.behavior.zoom().x(xScale).scaleExtent([1, 100]).on("zoom", redraw);

What this does is make zoombie behave like a pan. Now for redraw:

function redraw() {
  svg.select(".x.axis").call(xAxis);
  vis.selectAll("rect.bar")
      .attr('width', barWidth)
      .attr('x', function(d, i) { return xScale(i); });
}

And you've got yourself a panning bar chart. Now in terms of allowing some vertical latitude for panning, it's possible but making it work is more involved, and plus what are you going to do when you zoom into the top of a bar chart?