Question

我有一个sankey图，用户可以在其中自由移动和定位节点。我想保存用户选择的确切像素位置，并在下一次图表再生中使用它。

我到目前为止设法解决这个问题的唯一方法是使用＆＃34; x层＆＃34;节点而不是精确的x位置（不是像素中的x坐标，而是层/级别中的x坐标 - 1,2,3等...）。

有没有办法使用像素坐标？

Answer 1

我猜你在用户移动节点时正在使用transform。

如果您为每个节点分配一个ID，则可以保存[ (#id, transformation) ..; ]之类的对，并在之后再次应用。

如果你展示你的代码，我可以尝试一下：）

Answer 2

sankey插件充当您的数据模型。它所做的就是计算路径的'rect'和'dx'的x以及许多其他位置计算。您可以使用'dragend'捕获这些位置。

获得数据后，您可以获取并设置模式

var getNodes = sankey.nodes();
//do something here to set the position 
sankey.nodes(getNodes);

然后你会对链接做同样的事情。然后重新计算一切。

sankey.layout()

在没有看到您的代码的情况下，我确信将会采取另一个步骤来确保其有效，但您会发现它是一个易于更新的简单模块。

您可能想检查实际的源代码，因为我有一个可能具有不同变量名的自定义版本，但它的工作原理相同。

Answer 3

您可以提取x和y值并将其保存到数组中，如下所示：

var savedCoordinates = sankey.nodes().map(function(d) {
        return {x:d.x, y:d.y};
});

当然，在计算布局之后必须使用，否则x和y值是未定义的。

要返回已保存的坐标，您可以使用以下内容：

sankey.nodes().forEach( function(d,i) { d.x= savedCoordinates[i].x; d.y= savedCoordinates[i].y; });

最后，您需要使用您正在使用的绘图函数更新绘图（更新transform节点的g属性和链接的path属性

PS：您注意到我假设节点顺序没有改变。如果是，您需要提供id字段，或类似于您的数据......您有吗？

d3 Sankey分配固定的x，y位置

3 个答案: