javascript - 如何确保拖动时数据在 d3 中正确传递？

Question

我有一个 d3 图表，用户可以在其中沿 y 轴拖动一些点。

我想做的是更新原始数据数组，以包含用户对该图表上表示的任何值的更新选择。

这是拖动功能:

function dragged( e ) {
            let yLocation = d3.event.y;

            let index;
            for ( index = 0; index < data.length && data[ index ][ 'x' ] !== e.x; index++ ) {
            }
            data[ index ][ 'y' ] = (y.invert(d3.mouse(this)[ 1 ]));

            d3.select(this).select("circle")
              .attr("cy", e.y = yLocation);

            update(data);
        }

我的问题是在尝试更新数组中的值时:

data[ index ][ 'y' ] = (y.invert(d3.mouse(this)[ 1 ]));

如果我尝试记录(y.invert(d3.mouse(this)[ 1 ]))，则会显示正确的值(与鼠标位置相对应的值)，但是如果我尝试为了记录数据数组，对象将使用鼠标的位置而不是与该位置对应的值进行更新。

在更新对象数组之前，我应该使用 Promise 来控制值吗？或者有更好的解决方案吗？谢谢。

Answer 1

您想用这一行做什么:

d3.select(this).select("circle")
 .attr("cy", e.y = yLocation);

e 这里是数组中的数据对象。通过将 e.y 设置为 yLocation，您可以将数组数据的 y 值更新为鼠标位置。 请记住，当您将 JavaScript 对象传递给函数时，它是对该对象的引用(意味着它是同一个对象)。这意味着您不需要搜索和更新数据数组，您已经拥有了想要的部分!

这里正确的代码(当然未经测试)是:

let yLocation = d3.event.y;
e.y = y.invert(d3.mouse(this)[ 1 ]);
d3.select(this).select("circle")
  .attr("cy", yLocation);