Question

有可能吗？我不确定，因为d3大量使用this重新绑定，这似乎与ES6 spec冲突。

例如，以下工作正常：

// Working fine
var data = [1,2,3]
var svg = d3.select('body').append('svg').attr('height', 500).attr('width', 500).style('background-color', 'orange');
var gs = svg.selectAll('g').data(data).enter();
gs.append('circle')
    .attr('cx', function () { return Math.random()*500; })
    .attr('cy', function () { return Math.random()*500; })
    .attr('r', function () { return Math.random()*100; })
    .each(function () { console.log(this); });  // this is bound to the current element in the enter selection

虽然以下内容无法按预期工作（this未绑定到输入选择中的当前元素，但绑定到Window对象）：

var data = [1,2,3]
var svg = d3.select('body').append('svg').attr('height', 500).attr('width', 500).style('background-color', 'blue');
var gs = svg.selectAll('g').data(data).enter();
gs.append('circle')
    .attr('cx', () => Math.random()*500)
    .attr('cy', () => Math.random()*500)
    .attr('r', () => Math.random()*100)
    .each(() => console.log(this)); // this is bound to Window object

相关小提琴here。

Answer 1

如果您不需要访问当前元素的this，则可以使用箭头功能。

如果要访问当前元素的this，请回退到旧样式函数。

或者使用显式绑定来允许函数（非箭头函数）使用.bind()

访问您想要的任何对象

为避免使用this，您可以选择使用d3名称或类选择器来方便地访问任何元素。 e.g：

var stuffINeed = svg.selectAll('.someClass');

Answer 2

如果您使用的是d3v4，则可以像下面这样访问当前的DOM节点：

public interface JsonLoader
{
  /**
   * @param verify true if the returned JSON should be verified
   */
  void setVerify(boolean verify);

  /**
   * @return true if the returned JSON should be verified
   */
  boolean getVerify();

  /**
   * Loads the JSON file.
   * @throws VerificationException if the JSON was invalid
   */
  String load() throws VerificationException;
}

Answer 3

无法修改箭头功能的行为。他们的绑定是硬编码的＆＃39;并且不能通过重新绑定bind方法或通过调用接受显式执行上下文的任何其他Function方法（例如apply）来更改。任何绑定函数都可以这样说 - 一旦绑定，返回的函数就会被永久绑定。

有可能吗？

考虑到上述情况，如果d3使用bind来提供方便的链接行为，则使用箭头函数无法实现此，直到以某种方式修改d3的API容纳他们。

使用带有d3的箭头功能

3 个答案: