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

Posted 2023-02-22

【中文标题】无法在 D3 v4 中将 attr 与对象一起使用

【英文标题】：Cannot use attr with an object in D3 v4

【发布时间】：2016-12-05 16:37:33

【问题描述】：

我一直在尝试使用新的 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 是一个选择，附加应该可以工作，所以它必须是 .attr() 导致问题。但是，它在 jsfiddle 中确实可以正常工作。

这种语法在 D3 v4 中是否发生了变化？怎么会是正确的？

【参考方案1】：

从 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。

如果您不想更改这一切，只需按照“常规”方式进行操作：在单独的 attr 中设置 x、y、text-anchor 和 class。

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

【讨论】：

你能举一个the "regular" way: set x, y的例子吗？谢谢！

@Honghe.Wu 像这样：selection.attr("x", foo).attr("y", bar).attr("text-anchor", baz).attr("class", foobar);