Question

cases已显示许多SVG Geometric Zooming用于力导向图几何缩放。

在几何缩放中，我只需要在缩放功能中添加变换属性。但是，在语义缩放中，如果我只在节点中添加转换属性，则链接将不会连接到节点。所以，我想知道是否存在d3中力导向图的几何变焦解决方案。

这是我的example，在前一个案例之后进行了几何缩放。我有两个问题：

当我缩小，然后拖动整个图形时，图形会奇怪地消失。
使用相同的重绘功能

function zoom() {
  vis.attr("transform", transform);
}
function transform(d){
  return "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")";
}

这只更新了一个svg元素的“transform”属性。但是如何使函数改变节点位置？

但我想做的是semantic zooming。我试图修改缩放和转换功能，但不确定正确的方法。 Here是我尝试的。我改变的功能：

function zoom() {
  node.call(transform);
  // update link position
  update();
}
function transform(d){
  // change node x, y position, not sure what function to put here.
}

Answer 1

您必须转换节点并重绘路径。

“语义缩放”的想法是改变布局的比例，而不是单个元素的大小。

如果您已按照链接示例设置了缩放行为，则会自动为您更新x和y比例。然后，您可以根据这些比例重新设置节点的位置，还可以重新设置链接的位置和形状。

如果您的链接是直线，请使用更新的x和y刻度重新设置x1，y1，x2和y2位置。如果您的链接是使用d3.svg.diagonal创建的路径以及x和y比例，请使用相同的函数重新设置“d”属性。

如果您需要更具体的说明，则必须发布您的代码。

d3中力导向图的语义缩放

1 个答案: