无法将attr与D3 v4中的对象一起使用

Cannot use attr with an object in D3 v4

本文关键字：对象 一起 v4 attr D3      更新时间：2023-09-26

我一直在尝试转换一个不错的D3图表示例（https://jsfiddle.net/thudfactor/HdwTH/）转换为具有新的D3 v4的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是一个选择，追加应该有效，所以问题一定是.attr({})造成的。然而，它在jsfiddle中确实工作得很好。

D3 v4中的语法有变化吗？怎么会是正确的呢？

新答案

由于d3-selection-multi已被弃用，因此适当的解决方案只是使用常规的attr方法：

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

上一个答案

从D3 v4开始，不能再使用对象设置attr或style。为此，您必须参考迷你库D3选择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

相关文章：