可以在 for c3.js 循环中显示多个带有阈值的图表

Question

我尝试显示 7 个带有阈值的图表，查看示例，我尝试实现它，但它仅适用于第一个元素，如果有可能的话：

---

for(var i=0;i#chart${i}, 数据： { 列： [ ['Temperatura', + datos[i].temperatura] ], 类型：“仪表”， }, 填充：{ 前10名， }, 传奇： { 显示：真 }, 量规：{

      },
      color: {
        pattern: ['red', 'blue', 'red' ],
        threshold: {
            //Si se pasa de este rango se pondra en rojo , si esta dentro estara en color azul
          values: [arreglo[i].temperatura -10,arreglo[i].temperatura+10]
        }
      }, 
      onrendered: function() { 
        drawThresholds(this, thresholdOpts, opts);
      }
    };
     
     
      chart = c3.generate(opts); 
      
    function drawThresholds(chart, thOpts, chOpts)
    { 
        console.log(chart,thOpts,chOpts);
        d3.selectAll("line.myline").remove();
        d3.selectAll("rect.myrect").remove();
        d3.selectAll("text.mytxt").remove();
        radius = chart.radius,
        iradius = chart.innerRadius; 
        for (var j=0; j<chOpts.color.threshold.values.length;j++)//recorre los 3 valores
        {   //for(var i=0; i<chOpts.color.threshold.values.length;i++)
            v = chOpts.color.threshold.values[j]; 
            col = chOpts.color.pattern[parseInt(j) + 1];
            angle = Math.PI * v / 100;
            x0 = (iradius * Math.cos(angle));
            y0 = (iradius * Math.sin(angle));
            x1 = (radius * Math.cos(angle));
            y1 = (radius * Math.sin(angle));
            d3.select(".c3-chart-arcs").append("line")
            .attr({
                x1: -x0,
                y1: -y0,
                x2: -x1,
                y2: -y1
            })
            .attr('class', 'myline')
            .style("stroke-width", thOpts.strokeWidth)
            .style("stroke", 'black');
    
            x1 = ((radius + thOpts.boxSize) * Math.cos(angle)) + thOpts.boxSize / 2;
            y1 = ((radius + thOpts.boxSize) * Math.sin(angle)) + thOpts.boxSize / 2;
            d3.select(".c3-chart-arcs").append("rect")
            .attr({
                width: thOpts.boxSize,
                height: thOpts.boxSize,
                x: -x1,
                y: -y1
            })
            .attr('class', 'myrect')
            .style("fill", thOpts.boxFill ? col : "none")
            .style("stroke-width", thOpts.strokeWidth)
            .style("stroke", col);
            txtSize = measure(v, "mytxt");
            x1 = ((radius + thOpts.boxSize) * Math.cos(angle)) + txtSize.width / 2;
            y1 = ((radius + thOpts.boxSize) * Math.sin(angle)) + txtSize.height / 2 + 4;
            d3.select(".c3-chart-arcs").append("text")
            .attr({
                x: -x1,
                y: -y1
            })
            .attr('class', 'mytxt')
            .text(v);
        }
    }//function 

    function measure(text, classname) {
        if (!text || text.length === 0) return {
          height: 0,
          width: 0
        };
        container = d3.select('body').append('svg').attr('class', classname);
        container.append('text').attr({
          x: -1000,
          y: -1000
        }).text(text);
        bbox = container.node().getBBox();
        container.remove();
        return {
          height: bbox.height,
          width: bbox.width
        };
      }

}

Answer 1

尝试向 jsfiddle 之类的内容添加更完整的示例以获得更好的响应（使用一些示例数据使其运行），但我注意到了这一点：

您在每次循环迭代中运行 drawThresholds，并在每次迭代中运行以下命令：

d3.select(".c3-chart-arcs")

这将始终选择并作用于它找到的第一个 .c3-chart-arcs 实例，这将是第一个图表中的实例。

需要更改以在每次迭代中引用特定图表

例如d3.select(引用#chart${i} 元素).select(".c3-chart-arcs")

可以对 d3.selectAll .remove 命令应用相同的引用，但重复多次它们可能效率低下