使用D3 v4选择getBBox

Question

我尝试将d3.legend.js与d3 v4一起使用,但遇到了问题.所以我移植了index.html以使用d3 v4来查看问题是在我的代码中还是在d3.legend.js中.请参阅我的要点(正在运行的版本) - 问题出在d3.legend.js的第47行Uncaught TypeError: Cannot read property '0' of undefined.

我不熟悉d3(或v3的变化)来理解如何修复这个错误 - 任何想法？

更新1:根据发行说明,这似乎与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如果类已经存在,则保留为null.

我被迫使用(有点不优雅)

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 之前）。

这里必要的改变有两个：

1. 在 D3 v4 中，选择不是数组，而是对象。因此，使用[0][0]在这里不起作用。它应该使用node()：

   var lbbox = li.node().getBBox()
   

2. 在 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/