D3 v4中无法使用对象属性。

Question

D3 v4中无法使用对象属性。

12

我一直在尝试将一个漂亮的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中语法是否已更改？正确的做法是什么？

- TommyF

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gerardo Furtado · Accepted Answer

新答案

由于d3-selection-multi已被弃用，合适的解决方案是使用普通的attr方法：

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

之前的答案

从D3 v4开始，您 无法再使用对象来设置attr或style。要这样做，您必须引用mini库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。

如果您不想更改所有这些内容，可以采用“常规”方法：在单独的attr中设置x、y、text-anchor和class。

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