如何在 d3js 中的每个值线的每个点上附加一个圆圈？答案

【问题标题】：How to append a circle to each point of each valueline in d3js?如何在 d3js 中的每个值线的每个点上附加一个圆圈？
【发布时间】：2020-06-11 20:10:05
【问题描述】：

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

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); 
      });

【问题讨论】：

嘿西蒙，试着区分你的点的类别。我猜唯一带点的行是 forEach 循环中的最后一行，因为您选择了所有点并将最后一个 item.results 附加为数据。在 forEach 循环中添加一个迭代器并执行类似 .attr("class", "dot-" + i) 之类的操作，当您 selectAll 时，还要执行 .selectAll("dot-" + i)。希望这会有所帮助。
是的，这就是问题所在。谢谢。

标签： javascript arrays reactjs d3.js charts

【解决方案1】：

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

我也没有将线条和颜色比例函数移出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); 
  });

【讨论】：

谢谢，这正是我所需要的。