Question

我已经提取了一些数据，在缩放后，我绘制了一堆圆圈。这很有用。

var gSet = graph1.selectAll("g").data(data).enter().append("g");
gSet.append("circle")
  .attr({ cx: posX, cy: posY, r: dotSize })
  .attr("class", "dataPoint");

现在，我想连接点。我见过的大多数例子都是关于条形的，而不是线条，所以我用Google搜索了更多line charts并决定使用路径元素，就像这样。

var gSet = graph1.selectAll("g").data(data).enter().append("g");
gSet.append("circle")
  .attr({ cx: posX, cy: posY, r: dotSize })
  .attr("class", "dataPoint");
gSet.append("path")
  .attr("d", d3.svg.line().x(posX).y(posY))
  .attr({ "stroke": "yellow", "stroke-width": "1" });

屏幕上没有任何新内容，由于无知，我不确定在哪里查看出现了什么问题。

我应该使用路径（或行，折线等更好的选择）？
我应该使用 d 属性还是更合适？
我应该应用 d3.svg.line（）函数还是更顺畅？

Answer 1

我碰巧做了类似于我认为你想要的事情，所以我只是按原样粘贴在this jsfiddle中，它会告诉你一种连接线路的可能方法。这个更像是父/子图，但这只是基于数据。您可以删除父属性，只需将每个节点链接到上一个节点。

回答你的问题：

你可以使用路径，但如果你只是想要直线，那就有点矫枉过正了。如果您的案例很简单，那么我建议行。
如果使用路径对象，d属性将描述路径的形状。使用D3js的人经常使用d作为匿名方法中的两个可选参数之一（d是数据，我是递增计数器）。
您可以使用d3.svg.line（）函数来描述线条的形状和位置，但如果您的数据听起来那么简单那么可能会有点过分 - 考虑只是将线条对象附加为如下面的代码所示。如果你需要＆＃34;花哨的线条＆＃34;我的建议是走一条路，但那只是我的舒适区域，而且可能还有其他方法。

对于我的方法，代码最终看起来像这样

如何用D3连接D3中的点？

1 个答案: