在D3中为链接使用不同的命名约定

时间:2015-05-04 14:00:59

标签: javascript json d3.js force-layout

是否可以更改D3中被视为“链接”的内容?我从服务器收到的JSON设置为“节点”和“边缘”而不是“节点”和“链接”。以下是JSON示例:

{
"nodes": [
{"fixed":true,"data": {"id": "foo","idType":"USERNAME","color":"red"},"selected":false},
{"fixed":true,"data": {"id": "bar","idType":"USERNAME","color":"yellow"},"selected": false}
],
"edges": [
{"classes":null,"data":{"color":"blue","source":"foo","target":"bar","visible":true},"grabbable":false},
{"classes":null,"data":{"color":"green","source":"bar","target":"foo","visible":true},"grabbable":false}
]}

起初我以为它是从

宣布的
var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");

但是当我将.link更改为.edge我的代码中断时。

// sets the source and target to use id instead of index
var edges = [];
root.edges.forEach(function(e) {
    var sourceNode = root.nodes.filter(function(n) {
                return n.data.id === e.data.source;
            })[0],
            targetNode = root.nodes.filter(function(n) {
                return n.data.id === e.data.target;
            })[0];

    // push the attributes in the JSON to the edges.
    edges.push({
        source: sourceNode,
        target: targetNode,
        label: e.data['label'],
        color: e.data['color']
    });
});

force
        .nodes(root.nodes)
        .links(edges)
        .start();

link = link
        .data(edges)
        .enter().append("line")
        .attr("class", "link")
        .style("stroke-width", 1.5);

node = node
        .data(root.nodes)
        .enter().append("g")
        .attr("class", "node");

1 个答案:

答案 0 :(得分:0)

Halcyon关于d3没有关心你所谓的if (!($sth->execute(encode('UTF-8', $_))) && $DBI::err != 1062) { die "DB execute failed :" . $DBI::err . ": " . $DBI::errstr; } 的评论让我意识到我的代码并没有打破图形的实际初始化。它打破了我使用links作为id / source而不是默认target的方式。

index更改为root.links.forEach...解决了问题。