1

我正在通过 d3 渲染折线图，它绑定到以下格式的对象数组：

{ name: "somename",
  pointStart: 90210, 
  pointInterval: 187, 
  data: [1,2,3,4,5]
}

Y 值是 中的值data，X 值是 Date 值的序列，通过将 pointStart 添加到 pointInterval 和索引的乘积来计算data

除了绘制线路径之外，我还尝试在每个 x,y 坐标处覆盖​​“圆圈”。这条线正确渲染，除了第一个圆圈之外的所有圆圈都显示出来了。

检查此plunkr以获取实时示例。

由于线路径已经有 x,y 坐标，我希望使用它，并在每一对上绘制圆，但是没有找到第一个圆坐标，我不知道为什么。

这是选择线阵列，获取 x,y 对，然后绘制圆的代码。数据绑定到一个 9 元素数组，但只添加了 8 个圆到 dom...

lines.selectAll('path')
.data(function(d) { console.log(getDataArray(d)); return getDataArray(d); })
.enter()
.append('circle')
.attr({
    class:'dot',
    cx:line.x(),
    cy:line.y(),
    r:circleR,
    fill: function(d,i,e) { return colors(data[e].name);}
})
4

1 回答 1

4

It's because you're selection for "path" but adding "circles". When you do lines.selectAll('path') it returns a selection that contains 1 element because there is already a <path> element under lines. So when you do the data bind with 9 elements, the first element get bound to the existing path leaving the remaining 8 elements for the enter selection.

If you change it to this it should work:

lines.selectAll('circle')
    .data(function(d) { console.log(getDataArray(d)); return getDataArray(d); })
    .enter()
    .append('circle')
于 2013-09-29T03:02:01.957 回答