时间戳

首页 > 解决方案 > 为什么 '.attr("x", dx = d3.event.x)' 有效？

javascript - 为什么 '.attr("x", dx = d3.event.x)' 有效？

问题描述

我正在使用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)可以工作？

标签： javascriptd3.js

解决方案

在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()它只接收一个常量作为第二个参数。

推荐阅读