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 ]))，则显示正确的值（对应于鼠标位置的值），但是如果我尝试记录数据数组，则使用鼠标的位置更新对象而不是与该位置对应的值。

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

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);

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

1 个答案: