Javascript 将圆圈、文本等覆盖在d3.js多系列线上

为了支持我的数据集，我对数据集进行了轻微的修改。这就是我希望做的，我所看到的任何解决方案似乎都不适合我。我希望在直线上的每个点上覆盖一些元素（圆形、矩形、隐藏的，以两者为准），这样我就可以在该点上附加一个

mouseover

元素，以显示一个包含d.time、d.jobID以及与平均值相差多少的数据的框。如果可能，我希望解决方案只对主线（变化线）执行此操作，而不是绘制两条代表平均值的线。在这里，我有一个图形的图片，用于目视检查。如果这不起作用，我还附加了它

我已经发布了一些代码如下：

d3.tsv("values.tsv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "time" && key !==   "jobID"; }));

data.forEach(function(d) {
  d.time = parseDate(d.time);
  d.jobID = parseInt(d.jobID);
});

var points = color.domain().map(function(name) {
return {
  name: name,
  values: data.map(function(d) {
    return {time: d.time, jobID: d.jobID, value: parseFloat(d[name],10)};
  })
};
});

我已经尝试了以下代码，只是想看看它是否适用于我的实现：

point.append("svg:circle")
     .attr("stroke", "black")
     .attr("fill", function(d, i) { return "black" })
     .attr("cx", function(d, i) { return x(d.time) })
     .attr("cy", function(d, i) { return y(d.value) })
     .attr("r", function(d, i) { return 3 });

D3.JS看起来是一个非常棒的作品，我很幸运拥有它

---

编辑：

诀窍是再次将数据传递给选择，然后对结果进行操作。请看一些背景和示例

---

我已将您的JSFIDLE更改为添加圆圈。附加

svg:title

元素或执行其他操作以显示更多信息应该很简单。请注意，我修改了您的代码，略微创建了数据点，以便在每个元素中包含名称。这样，只需要一个附加级别的选择（将所有点视为相同的，并在一次过程中添加它们）。从代码设计的角度来看，解决这个问题的更简洁的方法是增加两个级别——首先选择一行的点（并添加一个

svg:g

元素对它们进行分组），然后在此组中添加点。这会使代码变得更复杂，更难理解。

哦，可能会让人感兴趣，因为这条线上有点。这个解决方案帮助我找到了正确的方向。Makoto最终在邮件列表中完全解决了这个问题。接受了，非常感谢。

point.append("svg:circle")
     .attr("stroke", "black")
     .attr("fill", function(d, i) { return "black" })
     .attr("cx", function(d, i) { return x(d.time) })
     .attr("cy", function(d, i) { return y(d.value) })
     .attr("r", function(d, i) { return 3 });