javascript - 更改 c3 圆环图上的背景填充

Question

我对 c3 库有疑问。事实上，我必须在表格单元格中生成许多圆环图。 图表已经很好地生成了，但是背景没有填充，只有第一个图表有很好的背景填充...

这里是我的生成代码:

var chartTitle1dy = 0;
  var chart = c3.generate({
    bindto: "#" + prefix + "_chart_" + scopeId + "_" + chartSiteId,
    size: {
      height: 75
    },
    data: {
      columns: [
        ['show', value],
        ['dontshow', dontShow]
      ],
      type: 'donut',
      order: null
    },
    color: {
      pattern: ['green', 'white']
    },
    legend: {
      show: false
    },
    donut: {
      label: {
        show: false
      },
      width: 5,
      expand: false
    },
    tooltip: {
      show: true,
      contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
        var $$ = this, config = $$.config,
          titleFormat = config.tooltip_format_title || defaultTitleFormat,
          nameFormat = config.tooltip_format_name || function (name) { return name; },
          valueFormat = config.tooltip_format_value || defaultValueFormat,
          text, i, title, value, name, bgcolor;
        for (i = 0; i < d.length; i++) {
          if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }

          if (! text) {
            title = titleFormat ? titleFormat(d[i].x) : d[i].x;
            text = "<table class='"
              + $$.CLASS.tooltip + "'>"
              + (title || title === 0 ? "<tr><th colspan='2' style='text-align: center;'>"
              + title
              + "</th></tr>" : "");
          }

          name = nameFormat(d[i].name);
          value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
          bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);

          text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
          text += "<td class='value' colspan='2' style='text-align: center;'>" + value + "</td>";
          text += "</tr>";
        }
        return text + "</table>";
      },
      format: {
        title: function() {return 'Details'},
        value: function() {
          return numerator + ' / ' + denominator;
        }
      }
    }
  });
// overide the chart title
  var label = d3.select('#myDifferentIdForEachChart text.c3-chart-arcs-title');
  label.html(''); // remove existant text
  label.insert('tspan')
    .text(Number(value) + "%")
    .attr('fill', '#000')
    .attr('dy', chartTitle1dy)
    .attr('x', 0)
    .attr('y', 0)
    .attr("style", "font-size: 0.7em");

  // grey background to fill center of donut
    d3.select("td .c3 .c3-chart")
      .insert("circle", ":first-child")
      .attr("cx", chart.internal.width / 2)
      .attr("cy", chart.internal.height / 2 - chart.internal.margin.top)
      .attr("r", chart.internal.innerRadius)
      .attr("fill", "#d3d3d3")
    ;

结果是我的小故障，每个带有“%”的值都是图表，但填充的是白色而不是浅灰色。

你能帮我解决一下吗？

提前致谢

Answer 1

一个可能的解决方案是改变这个:

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

d3.select 仅选择匹配的第一个元素(来自 https://github.com/d3/d3-selection ):

[d3.select] Selects the first element that matches the specified selector string. If no elements match the selector, returns an empty selection. If multiple elements match the selector, only the first matching element (in document order) will be selected.

如果你使用

d3.selectAll("td .c3 .c3-chart").attr("fill", "#d3d3d3")...

您应该能够一次设置所有图表的背景颜色。