凡例をドーナツチャートの右側に配置する方法

Question

ここに私のplunkr codeがあります。この凡例の位置は中心ですが、ドーナツチャートの右側にどのように配置しますか？

var svg = d3.select('#chart') 
    .append('svg') 
    .attr('width', width) 
    .attr('height', height) 
    .append('g') 
    .attr('transform', 'translate(' + (width/2 - radius) + 
     ',' + (height/2 - radius) + ')'); 

私は上記のコードを試しましたが、機能しません。

Answer 1

ピクセルであなたの凡例の幅を新しい変数を定義し、設定します。

var legendWidth = 150; 

使用svg要素の幅のため、この変数：

：この方法を属性

var svg = d3.select('#chart') 
    .append('svg') 
    .attr('width', width + legendWidth) // <== !!! 
    .attr('height', height) 
    .append('g') 
    .attr('transform', 'translate(' + (width/2) + 
    ',' + (height/2) + ')'); 

は伝説 transformために、あなたの関数を書き換え

var legend = svg.selectAll('.legend') 
    .data(color.domain()) 
    .enter() 
    .append('g') 
    .attr('class', 'legend') 
    .attr('transform', function(d, i) { 
    var height = legendRectSize + legendSpacing; 
    var offset = height * color.domain().length/2; 
    var vert = i * height - offset; 
    return 'translate(' + width/2 + ',' + vert + ')'; // <== move every legend item on half of width 
    }); 

チェックworking example here。

Answer 2

チェックアウトthisあなたのjsfiddleのバージョン。私は、右側に伝説を示すためにいくつかの計算を修正しました。強調表示されたコードの変更は以下のとおりです。

// For increasing horizontal space 
var width = 600; 

// For arranging chart in full space 
var svg = d3.select('#chart') 
     .append('svg') 
     .attr('width', width) 
     .attr('height', height) 
     .append('g') 
     .attr('transform', 'translate(' + (width/4) + 
     ',' + (height/2) + ')'); 

// For moving legend to right 
var legend = svg.selectAll('.legend') 
    .data(color.domain()) 
    .enter() 
    .append('g') 
    .attr('class', 'legend') 
    .attr('transform', function(d, i) { 
    var height = legendRectSize + legendSpacing; 
    var offset = height * color.domain().length/2; 
    var horz = 7 * legendRectSize;