Как добавить кружок к каждой точке каждой линии в d3 js? - PullRequest
Новая
       8

Как добавить кружок к каждой точке каждой линии в d3 js?

0 голосов
/ 27 февраля 2020

Я создал многострочную диаграмму из массива объектов с вложенными данными, однако круги добавляются только в 1 строку. Я использую реагирование на веб-интерфейсе и получаю данные из остальных 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); 
      });

1 Ответ

1 голос
/ 27 февраля 2020

Попробуйте изменения ниже, отметив использование итератора для дифференциации класса / выбора точек для каждой строки. Вы можете использовать что-то еще, например, атрибут данных, например name et c.

Также я не переместил функции линии и цветовой шкалы из ваших forEach l oop, поскольку они не нужно объявлять несколько раз. То же относится и к вашей всплывающей подсказке, которую можно использовать повторно вместо добавления нескольких DIV-ов в DOM. 

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