dimple.js或d3.js-在svg元素底部绘制图表图例

Question

我试图弄清楚如何使我的图例出现在图表的底部，但没有运气。 在下面的代码中，由于我的图表的高度为600，我认为我可以简单地为Y坐标添加一个偏移量600，这样就可以解决问题。 但是不起作用。

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

这是dimple.js的addLegend的文档： https : //github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#addLegend

Answer 1

您的代码应该没问题。

请检查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();