D3 v4 – 不能读取null的属性文本

我一直在试图把一个漂亮的D3图表例子（ https://jsfiddle.net/thudfactor/HdwTH/ ）转换成新的D3 v4的Angular2组件。

但是我做了一个“无法读取属性文本的空值”exception与下面的代码：

var textLabels = labelGroups.append("text").attr({ x: function (d, i) { var centroid = pied_arc.centroid(d); var midAngle = Math.atan2(centroid[1], centroid[0]); var x = Math.cos(midAngle) * cDim.labelRadius; var sign = (x > 0) ? 1 : -1 var labelX = x + (5 * sign) return labelX; }, y: function (d, i) { var centroid = pied_arc.centroid(d); var midAngle = Math.atan2(centroid[1], centroid[0]); var y = Math.sin(midAngle) * cDim.labelRadius; return y; }, 'text-anchor': function (d, i) { var centroid = pied_arc.centroid(d); var midAngle = Math.atan2(centroid[1], centroid[0]); var x = Math.cos(midAngle) * cDim.labelRadius; return (x > 0) ? "start" : "end"; }, 'class': 'label-text' }).text(function (d, i) { <--------------- exception return d.data.label; }); 

labelgroups是一个select，追加应该工作，所以它必须是导致问题的.attr({}) 。 它确实在jsfiddle中工作正常。
这个语法在D3 v4中有变化吗？ 怎么会是正确的？

谢谢！

Answer 1

在新的D3 v4.x中， 不能使用对象来设置attr或style 。 要做到这一点，你必须参考迷你图书馆D3-selection-multi：

 <script src="d3-selection-multi.v0.4.min.js"></script> 

做完之后，把你的代码从attr改成attrs （是的，就像复数）：

 var textLabels = labelGroups.append("text").attrs({ //all the key-value pairs here }); 

为样式做同样的事情：它应该是styles ，作为复数，而不是style 。

如果你不想改变这一切，只要做“常规”的方式：设置单独的attr x ， y ， text-anchor和class 。

这里是selection-multi文档： https ： //github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs