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

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

1 个答案: