访问d3函数中的当前属性

Question

circle是一个包含四个d3个圆圈的数组。

     circle
        .attr( "cy", function(){ this.attr("cy") + 10*input_data.pitch });

这失败了。如何访问上述匿名函数中的各个属性？

Answer 1

在您的功能中，this是Element的W3C DOM API。所以它只是this.getAttribute("cy")。

还有两件事：你忘了return一个值。由于属性值是字符串，因此在添加其他数字之前，您需要将它们强制转换为数字。否则，您的号码将被强制转换为字符串，然后两个字符串将被连接："10" + 2为"102"，而不是12。

所以，就像这样：

circle.attr("cy", function() {
  return +this.getAttribute("cy") + 10 * input_data.pitch;
});

所有这一切都说，从DOM属性中提取数据通常不是惯用的D3。 （它很慢，你有强制和序列化问题，因为DOM属性只能是字符串。）所以我建议寻找一种基于数据的方法，并限制自己的数据驱动文档...而不是文档驱动的数据！< / p>