javascript - 在d3.js多系列行上叠加圆圈，文本等

我对multi series line chart code进行了少许修改以支持我的数据集。这就是我想做的，我看过的解决方案似乎对我来说都无法正常运行。我希望在该行的每个点上覆盖一些元素（圆形，矩形，隐藏的），以便我可以在该点上附加一个鼠标悬停元素以显示一个包含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)};
  })
};
});

....

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 7)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("mbps");

var point = svg.selectAll(".point")
  .data(points)
.enter().append("g")
  .attr("class", "point");

point.append("path")
  .attr("class", "line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", function(d) { return color(d.name); });

point.append("text")
  .datum(function(d) { return {name: d.name, jobID: d.jobID, value: d.values[d.values.length - 1]}; })
  .attr("transform", function(d) { return "translate(" + x(d.value.time) + "," + y(d.value.value) + ")"; })
  .attr("x", 6)
  .attr("dy", ".7em")
  .text(function(d) { return d.name; });
});

我已经尝试了以下代码，只是看它是否可以与我的实现一起使用：

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似乎是一项非常出色的工作，我很幸运拥有它。

编辑：jsfiddle

最佳答案

诀窍是将数据再次传递给选择，然后对结果进行运算。请参阅Mike's tutorial以获得一些背景和示例。

我已更改您的jsfiddle以添加圆圈here。附加svg:title元素或执行其他操作以显示更多信息应该很简单。请注意，我修改了代码以稍微创建数据点，以在每个元素中包含名称。这样，仅需要一个附加级别的选择（将所有点都进行相同处理，并一次性添加即可）。从代码设计的角度来看，解决此问题的更干净的方法是增加2个级别-首先选择单个行的点（并添加一个svg:g元素将它们分组），然后添加这些点在这个组中。但是，这会使代码变得更加复杂且难以理解。

关于javascript - 在d3.js多系列行上叠加圆圈，文本等，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14043455/