在d3.js多系列线条上叠加圆圈、文字等

Overlay circle, text, etc. over d3.js multi-series lines

本文关键字：叠加 文字 js d3 系列      更新时间：2023-09-26

我有多系列折线图代码，稍加修改，以支持我的数据集。这就是我想做的，我看过的任何解决方案似乎都不适合我。我希望在线上的每个点上覆盖一些元素(圆形、矩形、隐藏的，随便哪个)，这样我就可以在该点上附加一个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)};
  })
};
});

…

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的教程，了解一些背景和例子。

我已经改变了你的字体，在这里添加了圆圈。附加svg:title元素或做其他事情来显示更多信息应该是直截了当的。请注意，我修改了代码以稍微创建数据点，以便在每个元素中包含名称。这样，只需要一个额外的选择级别(将所有点视为相同，并在一次传递中添加它们)。从代码设计的角度来看，解决这个问题的更清晰的方法是添加2个额外的关卡——首先为单个线提供点的选择(并添加svg:g元素将它们分组)，然后在该组中添加点。这将使代码更加复杂和难以理解。

相关文章：