dimple.js или d3.js - Нарисуйте легенду диаграммы внизу элемента svg

Я пытаюсь понять, как сделать так, чтобы моя легенда отображалась внизу диаграммы, но мне не повезло. В приведенном ниже коде, поскольку моя диаграмма имеет высоту 600, я полагаю, что могу просто добавить смещение 600 для координаты Y, и это поможет. Однако не работает.

var svg = dimple.newSvg("#chart", 800, 600);
...
chart.addLegend(0, 600 + 40, 200, 10, "left");

Кто-нибудь знает, как решить эту проблему с помощью dimple.js или d3.js? Также было бы здорово, если бы мне не приходилось жестко кодировать эти значения, а вместо этого можно было бы сделать что-то вроде этого:

chart.addLegend(0, d3.select("#chart").height + 40, 200, 10, "left");

вот документация для addLegend для dimple.js: https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#addLegend


d3.js visualization rickshaw dimple.js
person mike01010    schedule 06.09.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваш код должен быть в порядке.

Пожалуйста, проверьте скрипт js (http://jsfiddle.net/ch2187dd/)

var svg = dimple.newSvg("#chartContainer", 590, 540);
var myChart = new dimple.chart(svg, data);
myChart.setBounds(90, 35, 480, 325)
myChart.addCategoryAxis("x", ["date"]);
myChart.addCategoryAxis("y", "close");
myChart.addSeries("Price Tier", dimple.plot.bubble);
myChart.addLegend(90, 480, 330, 20, "left");
myChart.draw();
person rockTheWorld    schedule 06.09.2014
comment
Спасибо. я думаю, что мне не хватает setBounds. я предполагаю, что размер svg - это общая область «холста», а методы setBounds ограничивают диаграмму областью на холсте svg, оставляя место для рисования других фигур/элементов? - person mike01010; 06.09.2014