Question

您好我用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() + ")");
}

有人能帮助我吗？

Answer 1

我对d3不是很熟悉，但this之前的回答应该给你足够的解释来做你想要的。

here是所有这些解释的结果

我希望这会有所帮助：）

Answer 2

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

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

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

接下来，我怀疑这不是您正在寻找的内容，但它会让您大部分都在那里，将缩放定义更改为而不是包括{{1} }

yScale

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

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

你已经掌握了平移条形图。现在，在允许一些垂直纬度进行平移的情况下，可能会让它更有效，并且当你放大到条形图的顶部时，你还会做些什么呢？

d3将直方图粘到轴上

2 个答案: