d3.js - 访问 d3 函数中的当前属性

Question

circled3是一个由四个圆组成的数组。

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

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

Answer 1

在您的函数内部，this是每个W3C DOM API的元素。所以它只是。this.getAttribute("cy")

还有两件事：你忘记了return一个值。由于属性值是字符串，因此您需要先将它们强制为数字，然后才能添加另一个数字。否则，您的号码将被强制转换为字符串，然后将两个字符串连接起来："10" + 2is "102"， not 12。

所以，像这样：

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

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