Javascript 如何将圆附加到d3js中每个valueline的每个点上？

我已经从一个包含嵌套数据的对象数组中创建了一个多行图表，但是圆仅附加到一行。我在前端使用react并从rest api获取数据，如图所示，创建了线，圆上的工具提示正常工作，但只有一行附加了圆

Object.values(data).forEach(item => {
      var valueline = d3
        .line()
        .x(function(d) {
          return x(d.circuit);
        })
        .y(function(d) {
          return y(+d.points);
        });
      var colorScale = d3
        .scaleSequential(interpolateRainbow) //.scaleSequential(d3.interpolateRainbow)
        .domain([1, 20]);
      console.log(colorScale(1));
      svg
        .append("path")
        .data([item.results])
        .attr("class", "line")
        .style("stroke", colorScale(item.constructor))
        .attr("d", valueline);

        var xScale = d3
        .scaleLinear()
        .domain([0, item.results.length-1]) // input
        .range([0, width]); // output

        var div = d3.select("body").append("div")   
        .attr("class", "tooltip")               
        .style("opacity", 0);
      svg
        .selectAll(".dot")
        .data(item.results)
        .enter()
        .append("circle") // Uses the enter().append() method
        .attr("class", "dot")
        .attr("r", 5) // Assign a class for styling
        .attr("cx", function(d, i) {
          return xScale(i);
        })
        .attr("cy", function(d, i) {

          return y(d.points);
        }).on("mouseover", function(d) {        
         let points = item.results.filter(xd => xd.circuit==d.circuit)[0].points
          div.transition()      
              .duration(200)        
              .style("opacity", .9);        
          div   .html(item.name + "<br/>"  + points)    
              .style("left", (d3.event.pageX) + "px")       
              .style("top", (d3.event.pageY - 28) + "px");  
          })                    
      .on("mouseout", function(d) {     
          div.transition()      
              .duration(500)        
              .style("opacity", 0); 
      });

Object.values（数据）.forEach（项目=>{
var valueline=d3
.第（）行
.x（功能（d）{
返回x（d.电路）；
})
.y（功能（d）{
返回y（+d点）；
});
var colorScale=d3
.scaleSequential（InterpolaterInbow）/.scaleSequential（d3.InterpolaterInbow）
.域名（[1,20]）；
控制台日志（颜色刻度（1））；
svg
.append（“路径”）
.数据（[项目结果]）
.attr（“类”、“行”）
.style（“笔划”、色标（项目构造函数））
.attr（“d”，valueline）；
var xScale=d3
.scaleLinear（）
.domain（[0，item.results.length-1]）//输入
.range（[0，宽度]；//输出
var div=d3.选择（“主体”）.追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
svg
.selectAll（“.dot”）
.数据（项目.结果）
.输入（）
.append（“圆”）//使用enter（）.append（）方法
.attr（“类”、“点”）
.attr（“r”，5）//为样式指定一个类
.attr（“cx”，函数（d，i）{
返回xScale（i）；
})
.attr（“cy”，函数（d，i）{
返回y（d点）；
}).on（“鼠标悬停”，函数（d）{
让points=item.results.filter（xd=>xd.circuit==d.circuit）[0]。点
过渡部（）
.持续时间（200）
.样式（“不透明度”，.9）；
div.html（item.name+“
”+点数）
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；
})                    
.on（“mouseout”），函数（d）{
过渡部（）
.持续时间（500）
.样式（“不透明度”，0）；
});

尝试下面的更改，注意使用迭代器区分每行点的类别/选择。您可以使用其他内容，如数据属性，例如名称等

此外，我还将线条和颜色比例函数移出了

forEach

循环，因为它们不需要多次声明。这同样适用于工具提示，它可以继续，而不是向DOM添加多个div

var valueline = d3
 .line()
 .x(function(d) {
   return x(d.circuit);
 })
 .y(function(d) {
   return y(+d.points);
 });    

var colorScale = d3
    .scaleSequential(interpolateRainbow) //.scaleSequential(d3.interpolateRainbow)
    .domain([1, 20]);
  console.log(colorScale(1));

var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

Object.values(data).forEach((item,k) => {

  svg
    .append("path")
    .data([item.results])
    .attr("class", "line")
    .style("stroke", colorScale(item.constructor))
    .attr("d", valueline);

    var xScale = d3
    .scaleLinear()
    .domain([0, item.results.length-1]) // input
    .range([0, width]); // output

  svg
    .selectAll(".dot-"+k)
    .data(item.results)
    .enter()
    .append("circle") // Uses the enter().append() method
    .attr("class", "dot-"+k)
    .attr("r", 5) // Assign a class for styling
    .attr("cx", function(d, i) {
      return xScale(i);
    })
    .attr("cy", function(d, i) {

      return y(d.points);
    }).on("mouseover", function(d) {        
     let points = item.results.filter(xd => xd.circuit==d.circuit)[0].points
      div.transition()      
          .duration(200)        
          .style("opacity", .9);        
      div   .html(item.name + "<br/>"  + points)    
          .style("left", (d3.event.pageX) + "px")       
          .style("top", (d3.event.pageY - 28) + "px");  
      })                    
  .on("mouseout", function(d) {     
      div.transition()      
          .duration(500)        
          .style("opacity", 0); 
  });

var valueline=d3
.第（）行
.x（功能（d）{
返回x（d.电路）；
})
.y（功能（d）{
返回y（+d点）；
});    
var colorScale=d3
.scaleSequential（InterpolaterInbow）/.scaleSequential（d3.InterpolaterInbow）
.域名（[1,20]）；
控制台日志（颜色刻度（1））；
var div=d3.选择（“主体”）.追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
Object.values（数据）.forEach（（项，k）=>{
svg
.append（“路径”）
.数据（[项目结果]）
.attr（“类”、“行”）
.style（“笔划”、色标（项目构造函数））
.attr（“d”，valueline）；
var xScale=d3
.scaleLinear（）
.domain（[0，item.results.length-1]）//输入
.range（[0，宽度]；//输出
svg
.selectAll（“.dot-”+k）
.数据（项目.结果）
.输入（）
.append（“圆”）//使用enter（）.append（）方法
.attr（“类”，“点-”+k）
.attr（“r”，5）//为样式指定一个类
.attr（“cx”，函数（d，i）{
返回xScale（i）；
})
.attr（“cy”，函数（d，i）{
返回y（d点）；
}).on（“鼠标悬停”，函数（d）{
让points=item.results.filter（xd=>xd.circuit==d.circuit）[0]。点
过渡部（）
.持续时间（200）
.样式（“不透明度”，.9）；
div.html（item.name+“
”+点数）
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；
})                    
.on（“mouseout”），函数（d）{
过渡部（）
.持续时间（500）
.样式（“不透明度”，0）；
});

Hey Simon，尝试区分点的类别。我猜带点的唯一一行是forEach循环中的最后一行，因为您选择了所有点并附加了最后一项。结果作为数据。向forEach循环添加迭代器，并执行类似.attr（“class”，“dot-”+I）的操作，当您选择all时，也可以执行。selectAll（“点-”+i）。希望这有帮助。是的，这就是问题所在。谢谢。谢谢，这正是我需要的。