はどのように我々は、私は別の色と適切に整列して<code>d.data</code>を表示したいdc.js

Question

.legend(dc.legend().x(0).y(5).itemHeight(5).gap(8).horizontal(1) 
     .legendWidth(90).itemWidth(95).legendText(function (d) { 
    if (d.name == 'category4') { 
     return ' VI>20 ' + " " + " : " + d.data; 
    } 
    if (d.name == 'category3') { 
     return 'VI>10 and <=20 ' + " " + " : " + d.data; 
    } 
    if (d.name == 'category2') { 
     return 'VI>5 and <=10 ' + " " + " : " + d.data; 
    } 
    if (d.name == 'category1') { 
     return 'VI<=5 ' + " " + " : " + d.data; 
    }; 
})); 

に適切なアライメントと異なる色で伝説の横に伝説の値を追加することができます。

Answer 1

正しいアライメントでは、数字の右揃えを意味します。

一般に、dc.jsは誰もが望むすべての書式設定オプションを期待できないため、ほとんどのアクセサーと書式作成者がテキストを生成します。しかし、イベントにフックすることでカスタマイズすることができます。

あなたのツールはpretransitionイベントハンドラで、凡例用に作成されたtext要素内のtspanです。例えば

、nameとdataを分割し、名前が、右揃えdataビット右を左揃えにする、あなたができる：

chart.on('pretransition', function(chart) { 
     chart.selectAll('.dc-legend-item text') 
      .text('') 
     .append('tspan') 
      .text(function(d) { return d.name; }) 
     .append('tspan') 
      .attr('x', 100) 
      .attr('text-anchor', 'end') 
      .text(function(d) { return d.data; }); 
    }); 

あなただけ調整する必要がありますカテゴリ名の処理。

これをpie external labelsの例に追加しました。