Question

我正在通过d3渲染折线图，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);}
})

Answer 1

这是因为您选择“路径”但添加“圈子”。执行lines.selectAll('path')时，它会返回包含1个元素的选择，因为行下已有<path>个元素。因此，当您使用9个元素进行数据绑定时，第一个元素将绑定到现有路径，剩下的8个元素将用于输入选择。

如果你把它改成它应该有效：

lines.selectAll('circle')
    .data(function(d) { console.log(getDataArray(d)); return getDataArray(d); })
    .enter()
    .append('circle')

将svg：circle元素添加到d3.js行

1 个答案: