D3js 强制有向图链接强度被阻止为 0答案

【问题标题】：D3js force directed graph linkStrength blocked to 0D3js 强制有向图链接强度被阻止为 0
【发布时间】：2014-04-23 14:02:17
【问题描述】：

我在使用 d3js 和强制定向布局时遇到了一些问题：

链接很弱，就像将 linkStrength() 设置为 0 一样。但更改它不会改变任何东西。

当我拖动一个节点时，其他节点不动...

编辑：

我发现通过将数据更改为经典的整数索引数组，一切正常！ 我不知道为什么键值数组或对象不起作用...

这是我的代码：

tick =  ->
    link
    .attr "x1", (d) ->
        nodes[d.source].x
    .attr "y1", (d) ->
        nodes[d.source].y
    .attr "x2", (d) ->
        nodes[d.target].x
    .attr "y2", (d) ->
        nodes[d.target].y

circles
    .attr "cx", (d) ->
        d.x
    .attr "cy", (d) ->
        d.y


nodes_values = d3.values nodes

force = d3.layout.force()
    .nodes nodes_values
    .links links
    .size([width, height])
    .charge(-120)
    .linkDistance(30)
    .on 'tick', tick
    .start()

link = svg.selectAll(".link")
    .data links
    .enter()
    .append("line")
    .attr("class", "link")
    .attr "marker-end", "url(#arrow)"




groups = svg.selectAll(".node")
    .data nodes_values
    .enter()
    .append 'g'


circles = groups
    .append("circle")
    .attr("class", "node")
    .attr "r", (d)-> 
        if d.weigth
            return d.weigth * 5
        else 
            return 5
    .style "fill", (d) -> color d.group
    .call(force.drag)

数据看起来像：

链接：

"[
 {
  "source": "xxxx.xxxx@xxxxx.xx",
  "target": "NIWT",
 },
 {
  "source": "yyyyy.yyyyy@yyyyyy.yyy",
  "target": "NIUT",
 }
]"

节点：

 {
        "xxxxx.xxxxx@xxxxx.xxx" : {
            "name":"xxxxx.xxxxx@xxxxx.xxx",
            "group":"Operateurs",
            "weight":0,
            "x":386.20246469091313,
            "y":282.4477932203487,
            "px":386.337157279126,
            "py":282.4570376593727,
        },
        "yyyyy.yyyyy@yyyyy.yyyy": {
            "name":"yyyyy.yyyyy@yyyyy.yyyy",
            "group":"Operateurs",
            "weight":0,
            "x":853.3548980089732,
            "y":395.80903774295444,
            "px":853.2517240837253,
            "py":395.7616750529105
        }
    }

你有什么想法吗？

【问题讨论】：

标签： d3.js force-layout

【解决方案1】：

问题出在您传递给强制布局的链接数组中。

链接的源值和目标值需要是指向实际节点数据对象的指针，而不仅仅是字符串 ID。这样，当 d3 强制布局扫描链接数组时，它可以访问数据对象并根据链接强度调整 x 和 y 值。

要解决此问题，您需要添加一个额外的例程来遍历您的链接数组并使用字符串从您的节点哈希图中提取数据对象。

var links_pointers = links.map(function(link){
       return {source:nodes[link.source], target:nodes[target.source]};
    });

var nodes_values = d3.values(nodes);

force = d3.layout.force()
    .nodes(nodes_values)
    .links(links_pointers)
    /* etc. */

当然，您可以使用links_pointers 数组作为link 选择的数据并相应地更改您的刻度函数（使用d.source.x 而不是nodes[d.source].x 等）

【讨论】：