javascript - 如何更改散点图中图例的位置 D3.js

Question

我想移动图表顶部的图例

我尝试使用 CSS 相对位置，但它似乎不适用于 SVG

请看代码笔

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

更新代码笔:http://codepen.io/anon/pen/GqLXRx