d3.js - 使用根节点标记后的中心力定向布局(返回中心)

标签 d3.js force-layout

我正在尝试使用 D3.js 进行强制定向布局。我需要的是将布局按根(或其他选定节点)居中,并在刻度函数完成后将此节点返回到 svg(例如 Canvas )中心(图形 alpha 低)。是否可以?我找到了一个例子

http://bl.ocks.org/1080941

但我无法使根(使用 aplha 或其他自定义刻度函数计算时)返回中心(此特定节点使布局居中)。

任何帮助,将不胜感激。

最佳答案

实际上我是这样解决的(类似于以前但更复杂):

force.on("tick", function(e) {

     node.attr("transform", function(d) { 
         //TODO move these constants to the header section
        //center the center (root) node when graph is cooling down
        if(d.index==0){
            damper = 0.1;
            d.x = d.x + (w/2 - d.x) * (damper + 0.71) * e.alpha;
            d.y = d.y + (h/2 - d.y) * (damper + 0.71) * e.alpha;
        }
        //start is initiated when importing nodes from XML
        if(d.start === true){
            d.x = w/2;
            d.y = h/2;
            d.start = false;
        }

        r = d.name.length;
        //these setting are used for bounding box, see [http://blockses.appspot.com/1129492][1]
        d.x = Math.max(r, Math.min(w - r, d.x));
        d.y = Math.max(r, Math.min(h - r, d.y));

            return "translate("+d.x+","+d.y+")";            

     }
    );

     });   

关于d3.js - 使用根节点标记后的中心力定向布局(返回中心),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9362894/

相关文章:

javascript - 使用 d3 画笔选择折线图中的元素

html - D3 在鼠标悬停时填充饼图段

d3.js - D3 带边界框的力定向布局

javascript - 在三 Angular 形内强制图表 d3.js

javascript - 如何停止 d3.drag 在 chrome 中触发 mouseover/mouseout 事件

javascript - D3.js 中止转换并防止结束事件

javascript - 如何计算 SVG 中的 d 路径?

javascript - 如何使 D3.js 中的力布局图响应屏幕/浏览器大小

javascript - D3力布局仅显示一个链接

javascript - d3 力导向树单击节点时显示 NaN