0

嗨，我用 d3 库制作了这个直方图：jsFiddle
它是可缩放的，所以你也可以平移它。但我希望直方图至少粘在 xAxis 上，这样你就不能平移到负值。我已经通过限制域进行了尝试，什么对轴有效，但不影响条形。

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() + ")");
}

有谁能够帮我？

4

2 回答 2

0

我对 d3 不是很熟悉，但这个先前的答案应该给你足够的解释来做你正在寻找的东西。

这是所有这些解释的结果

我希望这有帮助 ：）

于 2012-12-20T14:33:40.970 回答
0

在短期内，这就是我们得到的。首先，除了宽度之外，您的可视化的所有属性都是根据比例定义的。您首先需要解决这个问题，这样您就不必依赖向条形添加比例和平移转换来生成所需的缩放效果。有几种方法。最好使用序数比例，但同样是短顺序。我们将编写一个函数来代替：

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

进入您的 vis 并用该函数替换您手动计算的宽度。

接下来，我怀疑这不是您正在寻找的，但它会让您大部分时间到达那里，将您的缩放定义更改为不包括yScale

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

这样做是让 zoombie 表现得像一个平底锅。现在重绘：

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

你有一个平移条形图。现在，在允许一些垂直纬度进行平移方面，这是可能的，但使其工作更加复杂，而且当你放大到条形图的顶部时你会做什么？

于 2012-12-21T18:07:19.293 回答