javascript - 为什么 d3 行适用于一个 js 对象，但不适用于另一 js 对象？

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 .