无法对D3 v4中的对象使用attr

Question

我一直在尝试使用新的D3 v4将一个不错的D3图表示例转换为Angular2组件。

但是，我得到了以下代码“无法读取null的属性文本”异常：

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是一个选择，append应该起作用，因此它一定是.attr({})引起问题的原因。但是，它在jsfiddle中确实可以正常工作。D3 v4中的此语法是否已更改？怎么会正确呢？

谢谢！

Answer 1

在D3 v4（以及v5）中，不能使用对象设置attr或style。为此，您必须引用迷你库D3-selection-multi：

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

之后，将您的代码从更改attr为attrs（是，就像复数一样）：

var textLabels = labelGroups.append("text").attrs({
    //mind the 's' here-------------------------ˆ
});

对样式执行相同操作：应styles为复数形式，而不是style。

如果你不想改变这一切，根本就作为“常规”方式：套x，y，text-anchor并class在不同的attr。