Как разместить легенду справа от кольцевой диаграммы

Question

Как разместить легенду справа от кольцевой диаграммы

1

Вот мой код 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) + ')');

Я попытался с вышеуказанным кодом, но он не работает.

Vishnu 06 дек. 2017, в 09:41

Источник

0

Предоставить jsFiddle?
Aravind Cheekkallur 06 дек. 2017, в 08:11
0

plnkr.co/edit/EW0k581XFBIeelwonwl2?p=preview
Vishnu 06 дек. 2017, в 08:15
0

jsfiddle.net/nx4aph3w JS Fiddle
Vishnu 06 дек. 2017, в 08:38
0

@vishnu проверьте эту версию jsfiddle jsfiddle.net/nx4aph3w/1
sandyJoshi 06 дек. 2017, в 08:57

Показать ещё 2 комментария

Теги:

javascript

d3.js

svg

2 ответа

0

Проверьте эту версию своего 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;

sandyJoshi 06 дек. 2017, в 05:56

Ещё вопросы

@vishnu проверьте эту версию jsfiddle jsfiddle.net/nx4aph3w/1

Mikhail Shabrikov · Accepted Answer · 2017-12-06T07-38-00.000Z

Определите новую переменную и установите ширину легенды в пикселях:

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
  });

Проверьте рабочий пример здесь.