Question

我正在尝试制作d3分组条形图。这是我到目前为止： http://jsbin.com/sobuv/2/

我目前遇到的问题是我的酒吧的高度与y轴的值不匹配。例如，在第一组“Jan”中，值为33.98,40.1,60.1但我只设置了高度。

我在这里做错了什么 - 可能我猜这些线？

.transition()
   .duration(500)
     .attr("y", parseInt(h, 10) - value)
     .attr("height", value);

我很欣赏这里的一只手，我确信它的一些简单之处在于我。谢谢！

Answer 1

（回顾评论）

如果您习惯使用统计或电子表格绘图程序，您可能希望根据声明轴的最大值和最小值时创建的比例绘制图形。这不是它如何与d3一起使用。每个元素都作为SVG图形对象单独绘制，如果给它大小或位置值，它们将被解释为像素值（如果您使用了任何图形转换，则转换为SVG坐标）。

D3 scales用于管理数据值与屏幕像素之间的关系。您可以根据数据值设置比例域，并根据要用于该数据的像素值设置比例范围。对于线性（数值）比例，域和范围被定义为双元素数组 - 范围中的第一个值将是数据的像素值，等于域中的第一个值，范围中的第二个值将是域中第二个值的像素值，每个其他值将按照这些值的比例计算。

但仅仅创建比例是不够的。缩放对象是函数 - 您将值作为参数传入，并返回用于设置SVG元素的宽度，高度，x和y位置的像素值。 / p>

对d3的好介绍：

Mike Bostock的"Let's Make a Bar Chart" - 量表在part 2
Scott Murray的D3 Tutorials（以及他们从他们那里开发的书） - 量表在ch. 15
还有更多listed on the d3 wiki

关于D3分组图表实现的条形高度问题

1 个答案: