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 fiddle(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();