javascript - 不能对 D3 v4 中的对象使用 attr

Question

我一直在尝试使用新的 D3 v4 将一个不错的 D3 图表示例 ( https://jsfiddle.net/thudfactor/HdwTH/) 转换为 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-selection-multi 已被弃用，适当的解决方案就是使用常规的 attr 方法:

selection.attr("foo", foo)
    .attr("bar", bar)
    etc...

---

上一个答案

从 D3 v4 开始，您不能再使用对象来设置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 中。

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