Question

所以D3代码如下：

两种情况下的D3代码都是

  msBars = svgContainer.selectAll('line')
                    .data(jsonFragmentIons)
                    .enter()
                    .append("line")

  msBarAttributes = msBars
                     .attr("x1", (d) -> return xScale(d.m_mz) )
                     .attr("y1", h - padding)
                     .attr("x2", (d) -> return xScale(d.m_mz) )
                     .attr("y2", (d) -> return h - yScale(d.m_intensity) )
                     .attr("stroke-width", 1.2)
                     .attr("stroke", (d) -> return d.color)

其中先前定义了缩放功能。所有d3代码都是一个，json对象是不同的。为了说明这一点，我创建了这两个jsfiddles，唯一不同的是json对象。

下面，

http://jsfiddle.net/Nu95q/6/

代码似乎工作正常，所有行都被绘制。

但是如果我改变了json对象，那么：

http://jsfiddle.net/Nu95q/7/

D3不会在json对象中为每个数据绘制一行... 这令我感到困惑。为什么会发生这种情况？我唯一能想到的是mz_intensity属性的不同比例，但是，为什么一行被绘制好但没有其余的呢？

Answer 1

问题是你在添加线条和标签之前绘制轴。通过执行.selectAll("line")和.selectAll("text")，您将选择轴组件添加的现有DOM元素。然后您将数据与其匹配，因此您的.enter()选择不包含您想要的内容。

这个问题也出现在“工作”jsfiddle中，但由于有更多数据项，因此不太明显。要修复，可以在末尾添加轴，或者为您手动添加的元素添加区别类（例如bar），以便在选择时使用。实现后一解决方案的示例here。

为什么d3行使用一个js对象但不使用另一个js对象？

1 个答案: