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]指定されたセレクタ文字列に一致する最初の要素を選択します。セレクタに一致する要素がない場合は空の選択を返します。複数の要素がセレクタと一致する場合、最初に一致する要素（文書順）のみが選択されます。

あなたは

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

を使用する場合は、一度にすべてのあなたのチャートの背景色を設定することができるはずです。