D3力有向图：更新节点位置答案

【问题标题】：D3 force-directed graph: update node positionD3力有向图：更新节点位置
【发布时间】：2013-09-01 23:05:55
【问题描述】：

我刚开始使用d3 library。我花了几天时间探索 api 并查看示例，并基于 force-directed graph 示例开始了我自己的项目。

如果不是使用简单的形状（square、circle ...）而是使用路径绘制节点，我如何更新tick 之后的节点位置？

我提供了一个可以在这里查看的示例：jsFiddle

var svg = d3.select('#view').attr({width: 300, height: 300});

var data = {
    "nodes": [
        {
           "id": "node_0",
           "name": "Node 0",
           "color": "blue",
           "h": 10,
           "w": 20,
           "t": "triangle"
        },....

    ],

    "links": [
        {
            "source": 0,
            "target": 1
        },...

    ]
};

var force = d3.layout.force().size([300, 300])
.linkDistance(50)
.nodes(data.nodes)
.links(data.links).start()

var link = svg.selectAll('.link').data(data.links).enter()
.append('line')
.attr('class', 'link')
.attr({"stroke": "#ccc", "stroke-width": 1.5});

var wrapper = svg.selectAll('.node').data(data.nodes).enter()
.append('g')
.attr('class', 'node')
.attr('x', function(d){return d.x})
.attr('y', function(d){return d.y});

var getShape = function(t, x, y, w, h){
    var points = (t == 'triangle') ? 
        [ [x + w/2, y], [x + w/2 , y], [x + w, y + h], [x, y + h]]
        : 
        [ [x, y], [x + w, y], [x + w, y + h], [x, y + h]];

    return d3.svg.line()(points)
}

var node = wrapper.append('path')
.attr('d', function(d){return getShape(d.t, d.x , d.y, d.h, d.w) })
.attr('x', function(d){return d.x})
.attr('y', function(d){return d.y})
.attr('fill', function(d){return d.color})
.call(force.drag);

force.on('tick', function(){
     link
     .attr('x1', function(d){return d.source.x})
     .attr('y1', function(d){return d.source.y})
     .attr('x2', function(d){return d.target.x})
     .attr('y2', function(d){return d.target.y})

     node
     .attr('cx', function(d){return d.x})
     .attr('cy', function(d){return d.y});
});

【问题讨论】：

标签： javascript svg d3.js force-layout

【解决方案1】：

对于一般形状，您可以简单地使用transform 属性来相应地移动节点，参见例如this example.

【讨论】：

嗨，拉斯，谢谢您的回答。我也尝试使用 transform 属性，但节点不再与链接连接。示例 -> jsFiddle
您应用了两次转换，一次应用于包装器，一次应用于实际元素。你只需要拥有一次——jsfiddle.net/TYPjD/2
谢谢...我花了超过 3 小时解决这个问题 :)

【解决方案2】：

您正在使用大写字母绘制具有绝对位置的路径元素。相反，请尝试使用小写字母使用相对坐标来声明路径。这将允许您使用 svg transform 属性基于力模拟器更轻松地移动节点。

关于绝对点和相对点的绘制路径： https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

【讨论】：