Question

我一直试图将一个漂亮的D3图表示例（https://jsfiddle.net/thudfactor/HdwTH/）转换为带有新D3 v4的Angular2组件。

然而，我确实得到了一个＆＃34;无法读取null＆＃34;的属性文本。以下代码的异常：

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设置为单独{ {1}}。

以下是attr文档：https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs

不能在D3 v4中使用带有对象的attr

1 个答案: