不能在D3 v4中使用带有对象的attr [英] Cannot use attr with an object in D3 v4

问题描述

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

I've been trying to convert a nice D3 chart example ( https://jsfiddle.net/thudfactor/HdwTH/ ) to an Angular2 component with the new D3 v4.

然而，我使用以下代码获取无法读取null属性文本异常：

I do however get a "cannot read property text of null" exception with the following code:

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中的语法是否有所改变？怎么会这么正确？

labelgroups is a selection, append should work, so it must be the .attr({}) causing the problem. It does however work fine in the jsfiddle.
Has this syntax changed in D3 v4? How would it be correct?

谢谢！

推荐答案

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

In D3 v4 (and v5 as well), you cannot use objects to set attr or style. To do so, you have to reference the mini library D3-selection-multi:

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

执行此操作后，从 attr 到 attrs （是的，像复数形式）：

After doing that, change your code from attr to attrs (yes, like a plural):

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

对样式执行相同的操作：它应该是 styles ，复数形式，不是样式。

Do the same for the styles: it should be styles, as a plural, not style.

如果你不想改变这一切，只需按常规方式执行：设置 x ， y ， text-anchor 和 class 在单独的 attr 。

If you don't want to change all this, simply do as the "regular" way: set x, y, text-anchor and class in separate attr.

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

这篇关于不能在D3 v4中使用带有对象的attr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！