为什么“ .attr（“ x”，d.x = d3.event.x）“有效？

Question

我正在使用d3.drag()拖动文本。

有些人使用d3.select("text").attr("x", d.x = d3.event.x)来更改文本的位置。我已经阅读了D3文档，发现在selection.attr(name,value)中该值可以是常量或函数。

所以我想知道为什么selection.attr("x", d.x = d3.event.x)可以工作？

Answer 1

在attr()方法中，您共享的value只是一个常量（更确切地说是对象的属性），可以满足文档要求。

为提供此答案的某些上下文，您可能在这样的函数中使用它...

function dragged(d) {
    selection.attr("cx", d.x = d3.event.x);
} 

...您可以在API上看到。

以上代码段d中的数据为基准，此处无新内容。关于d3.event.x，相同的API将向您显示：

  

调用拖动事件侦听器时，会将d3.event设置为当前拖动事件。事件对象公开了几个字段：

     

  
• x-主题的新x坐标；
  

因此，您问题中的代码正在执行的操作是获取新的x坐标（即d3.event.x），将其值设置为d.x，然后将其返回到attr()方法，所有这些都在一个表达式中。请记住，该分配很重要：如果将其删除，则在尝试再次拖动它时会看到元素“跳跃”。

这种模式是人们通常在JavaScript中执行的操作，它免除了您获取值，将其传递给变量并以不同的行返回的麻烦：您只需一行就可以完成所有操作。例如，看一下此函数，return将初始化x变量并同时返回10：

var x;

function foo() {
  return x = 10;
};

console.log(foo())

为了使之更加清楚：d.x = d3.event.x是一个表达式，它将计算为单个值。在这里看看：

console.log(foo = "bar")

最后，您的方法与以下方法相同：

function dragged(d) {
    d.x = d3.event.x
    selection.attr("cx", d3.event.x);
    //just a constant---------^
} 

如您所见，attr()仅接收一个常量作为第二个参数。