D3.js D3散点图图例重叠

我有一个很好的散点图，但我添加到其中的图例与图表重叠。我目前的方法是将图表DIV设置为宽度的70%，让图例占据剩下的30%。由于某种原因，即使有HTML，图例也不会显示在屏幕上

这是指向我最初问题的链接：

以下是我目前正在尝试的链接：

HTML就在那里

只有组（g）元素存在，并且它们本身永远不可见。在原始代码中

var legend = svg.selectAll(".legend")
    .data(color.domain())
    .enter().append("g")
    ...

  legend.append("rect")

这里的

legend

是多个

g.legend

元素的选择，因此每个元素都附加了一个rect，并且可以访问绑定到父g的数据。然而，在您的新代码中

var legend = d3.select("#legend").append("svg")
    ...
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  legend.selectAll(".legend")
    .data(color.domain())
    .enter().append("g")
    ...;

  legend.append("rect")

此处的

图例

仅指包含整个图例的单个

g

元素。您的

legend.selectAll（“.legend”）

未保存到变量中，因此在链中正确设置类和转换属性时，您不会使用它来获得附加到它的rect——同样，

legend

此时指的是outter单g容器

---

潜在解决方案：

var legendCnt = d3.select("#legend").append("svg")
    .attr("width", $("#legend").width())
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var legend = legendCnt.selectAll(".legend")
    .data(color.domain())
...

---

您会注意到，您需要删除或降低text和rect的x属性，因为0现在位于图例的开头，而不是chart

Hmm好的，我想我明白您的意思了。虽然我仍然不清楚如何修复它。@cstreet编辑，认为（不要粗鲁）如果它难倒你的话，你可能是想咬得太多太早了。确保您对基础（进入merge update exit循环；选择vs selectAll和嵌套数据连接，调用如何工作）有一个很好的理解。Omg，我之前已经做过这种方法，但完全忘记了调整X属性。谢谢你的帮助！

var legendCnt = d3.select("#legend").append("svg")
    .attr("width", $("#legend").width())
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var legend = legendCnt.selectAll(".legend")
    .data(color.domain())
...