Как изменить положение легенды в графике NVD3?

Кто-нибудь знает, как переместить легенду в диаграмме NVD3 относительно самого графика?

Он по умолчанию по умолчанию, и я бы хотел, чтобы он пошел сбоку (лучше использовать пространство в моем приложении)

Пример того, что я хотел бы сделать:

Ответ 1

Для AFAIK нет возможности сделать это, но вы можете выбрать элемент g, содержащий легенду, вручную и переместить его, например.

d3.select(".nv-legendWrap")
  .attr("transform", "translate(100,100)");

Ответ 2

На момент написания этой статьи (2 июля 2015 г.) nvd3 поддерживается перенос легенды справа от круговой диаграммы.

Когда вы инициализируете график, установите legendPosition в right.

Пример:

nv.addGraph(function() {
    var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })          
      .legendPosition("right");


    svg.datum(piedata).call(chart);

  return chart;
});

См. http://nvd3-community.github.io/nvd3/examples/documentation.html#pieChart

Ответ 3

Вы можете навсегда изменить положение легенды для модели диаграммы nvd3, отредактировав сам файл JS. Это может работать лучше для обновления диаграммы, чем включение позиционирования в вашу инициализацию. Найдите JS (например, multiBarChart.js или lineChart.js) для: g.select('.nv-legendWrap'). После этого будет определен .attr, замените его на:

.attr('transform', 'translate(10,270)')

Где 10 - значение x, легенда сдвинута и 270 - это значение y, которое сдвинуто.

Ответ 4

Я пытаюсь решить ту же проблему с помощью lineChart. Сначала я просто добавил

d3.select('.nv-legendWrap').attr('transform', 'translate(0, 475)')

Но при изменении размера диаграммы он возвращается к умолчанию. Поэтому я также скопировал строку и добавил ее в мою функцию windowResize(), которая сработала. НО, затем, когда я нажимаю легенду, чтобы скрыть/показать строки, она переместит BACK в положение по умолчанию.

Я думаю, лучшим решением может быть редактирование js файла.

Похоже, что когда речь заходит о графике, просто нет простого решения. Документация NVD3.js очень лишена и ограничена. Но D3.js огромен, а также сложный... вы просто не можете иметь как легкость, так и настройку, вам нужно отказаться от того или другого.

Update: Если вам просто нужно немного переместить его, вы можете просто сделать следующее:

chart.legend.margin({top: 0, right: 0, left: 0, bottom: 20})

Ответ 5

Вы можете настроить chart.legend.margin. Он имеет top, right, left, bottom как атрибуты.

Ответ 6

Док по легенде находится здесь: http://nvd3-community.github.io/nvd3/examples/documentation.html#legend

в качестве примера:

chart.legend.rightAlign(false);