Question

我尝试将d3.legend.js与d3 v4一起使用，但遇到了问题。所以我移植了index.html以使用d3 v4来查看问题是在我的代码中还是在d3.legend.js中。请参阅my gist（running version） - 问题出在d3.legend.js Uncaught TypeError: Cannot read property '0' of undefined的第47行。

我不熟悉d3（或v3的更改）以了解如何修复此错误 - 任何想法？

更新1：根据the release notes，这似乎与d3选择的更改方式有关。

但仍不确定如何从li Selection中访问getBBox（）方法。

更新2：如果li.node().getBBox()非空，则li有效。出于某种原因，像

这样的代码

var li = g.selectAll(".legend-items")
             .data(["g"])
           .enter()
             .append("g")
             .attr("class", "legend-items")

如果类已经存在，

将li留空。

我被迫使用（有点不优雅）

var licreate = g.selectAll(".legend-items")
        .data(["g"])
      .enter()
        .append("g")
        .attr("class", "legend-items");
var li = g.selectAll(".legend-items");

Answer 1

此问题发布于D3 v4的头几天，它使用了2012年以来的D3插件，该版本早于v4（实际上也包括v3之前）。

必要的更改有两个：

在D3 v4中，选择的不是数组，而是对象。因此，在此处无法使用[0][0]。应该改用node()：
```
var lbbox = li.node().getBBox()
```
在D3 v4中，“输入”选择不再神奇地更改“更新”选择。因此，应该是：
```
lb = lb.enter().append("rect").classed("legend-box",true).merge(lb);
li = li.enter().append("g").classed("legend-items",true).merge(li);
```
此外，由于我看不到“更新”选择的更新情况，因此建议您在此处使用简单的“输入”选择。

这是更新的bl.ocks：http://bl.ocks.org/GerardoFurtado/raw/ca06385c40afa5414830b3d3d449cbe5/efeeed6ffc42051f433cfcb54c462acfd0daebb5/

使用D3 v4选择getBBox

1 个答案: