Question

我有一个力导向的节点图（d3，v4）。您可以在图形上平移和缩放，也可以单击并拖动各个节点。我还使用了General Update Pattern，因为该图还允许过滤节点。

我想做的是添加将鼠标移到特定节点并将其居中显示在屏幕上的功能。本质上，添加一个功能可以平移到特定的x / y坐标点。我已经尝试了一切。

我相信我在块中最接近的近似将是增加在点here上平移和居中的能力（除了点以外，我有一个力导向的节点和链接图）我还研究并尝试实现基于this，this，this，this，this，{{ 3}}，this，this，this，this，this，this和this。
我意识到有很多链接，我只是想表明我已经完成了研究，并尝试实现每个示例的代码。

我的图的结构是：

var width = window.innerWidth;
var height = window.innerHeight;

var svg = d3.select("body")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%")
   .call(d3.zoom().on("zoom", zoom))
  .append("g");

var link = svg.append("g").selectAll(".link"),
    node = svg.append("g").selectAll(".node");

我的缩放功能是：

function zoom() {
    svg.attr("transform", d3.event.transform );
}

我要做的平移和居中功能是：

function centerNode(source) {
    x = -source.x;
    y = -source.y;
    x = x * t.k + width / 2;
    y = y * t.k + height / 2;
    d3.select('svg').transition().duration(750).call( zoom.transform, d3.zoomIdentity.translate(x,y).scale(1) );
}

但是如果我对最后一行有任何排列，我会得到：ReferenceError: t is not defined在控制台中。

如果我在centerNode函数中的console.log（source），我得到了我的节点对象之一： Object { id: "my_id", name: "Little Red Circle", group: "connected", index: 4, x: 697.4600379753587, y: 269.2204063221257, vy: 0.038895661169052735, vx: 0.08018237068888456 }

如何平移到特定节点？（我从搜索函数中调用centerNode函数。）

在d3图形中添加点到点

0 个答案: