如何更改图例的位置在散点图D3.js

Question

我想传说在图表的顶部转向

我尝试使用CSS相对位置，但似乎它不会对SVG工作

请看看在codepen

http://codepen.io/7deepakpatil/pen/LkaKoy

var legend = svg.selectAll(".legend") 
    .data(color.domain()) 
.enter().append("g") 
    .attr("class", "legend") 
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

以上是其中正在生成图例中的代码。

是否有可能使用CSS或请提供任何D3或JS方式来解决这个问题。

Answer 1

使用SVG翻译。类似于你所拥有的，但你需要将它应用到整个传奇。所以，我附加了“G”元素，后来给了它，以便选择一个ID并应用了翻译你的任何附加之前它，像这样：

var legend = svg.append('g').attr('id','legendContainer') 
    .attr("transform", function(d) { return "translate(-200,100)"; }) //this is the translate for the legend 
    .selectAll(".legend") 
     .data(color.domain()) 
    .enter().append("g") 
     .attr("class", "legend") 
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

更新codepen：http://codepen.io/anon/pen/GqLXRx