带有div和d3缩放的d3力图 [英] d3 force graph with divs and d3 zoom

问题描述

您好Stackoverflow社区！我在以d3force定向的图形中运行d3缩放时遇到问题.我可以实现它正在缩放和平移，但是这样做破坏了节点和链接之间的对齐方式，而且我不知道该如何解决....我创建了一个小提琴，显示了我的意思. https://jsfiddle.net/5jgrf5h8/5/

Hello Stackoverflowcommunity! I am having trouble getting d3 zoom working in my d3force-directed graph. I could achieve that it is zooming and panning but doing so breaks the alignment between the nodes and the links and i don't know how i could fix it.... I created a fiddle showing what i mean. https://jsfiddle.net/5jgrf5h8/5/

这是我执行缩放的代码:

This is the code where i perform the zoom:

svg.call(d3.zoom()
  //.scaleExtent([1 / 2, 4])
  .on("zoom", zoomed))
.on("dblclick.zoom", null);
//.on("wheel.zoom", null);

function zoomed() {
  //link.attr("transform", d3.event.transform);
  link.attr("transform", "translate(" + d3.event.transform.x + "," + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")");
  node.style("transform", "translate(" + d3.event.transform.x + "px," + d3.event.transform.y + "px) scale(" + d3.event.transform.k + ")");

  simulation.alphaTarget(0.001).restart();
  simulation.alphaTarget(0);
}

推荐答案

在 div 节点上应用CSS scale 时，其起源为0,0 并非其当前位置的原点.

When you apply the CSS scale on your div nodes, it's with an origin of 0,0 not with an origin of the position they are current in.

尝试一下:

function zoomed() {

    // apply CSS scale with respect to current position
    node.each(function(d){
    var self = d3.select(this),
            x = self.style("left"),
        y = self.style("top");
    self.style("transform-origin", "-" + x + " -" + y);
  })

  link.attr("transform", "translate(" + d3.event.transform.x + "," + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")");
  node.style("transform", "translate(" + d3.event.transform.x + "px," + d3.event.transform.y + "px) scale(" + d3.event.transform.k + ")");

  simulation.alphaTarget(0.001).restart();
  simulation.alphaTarget(0);
}

---

更新了在这里拨弄

这篇关于带有div和d3缩放的d3力图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！