Вот мой код plunkr, в этом положении легенды находится в центре, как мне поместить его справа от диаграммы пончиков?
var svg = d3.select('#chart')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + (width / 2 - radius) +
',' + (height / 2 - radius) + ')');
Я попытался с вышеуказанным кодом, но он не работает.
Определите новую переменную и установите ширину легенды в пикселях:
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
});
Проверьте рабочий пример здесь.
Проверьте эту версию своего 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;