具有标签的力导向图

Question

我对D3.js很新，并试图理解为什么我的this example版本无效。我也使用this example作为参考。

从我可以收集到的，问题在于我的tick功能;当我发表评论时，svg对象被写入文档，但是没有写入svg。

这是我的代码：

// CSS STYLE
    .link {
        stroke: #ccc;
    }
    .node {
        pointer-events: none;
        font:10px sans-serif;
    }
// END CSS STYLE

// BEGIN JS IN BODY
// Data Set
var dataNodes = 
[
    {id: "N1", name: "First 1", type: "Type 1"},
    {id: "N2", name: "Node 2", type: "Type 3"},
    {id: "N3", name: "Node 3", type: "Type 4"}
];

var dataLinks = 
[
    {sourceId: "N1", linkName: "Relationship 1", targetId: "N2"},
    {sourceId: "N3", linkName: "Relationship 2", targetId: "N1"},
    {sourceId: "N2", linkName: "Relationship 3", targetId: "N1"}
];

var w = 960;
var h = 500;
var node;
var link;
var root;

var svg = d3.select("body")
            .append("svg")
            .attr("width",w)
            .attr("height",h);

var node_hash = [];
var type_hash = [];

nodeSet.forEach(function(d,i){
    node_hash[d.id] = d;
    type_hash[d.type] = d.type;
});

linkSet.forEach(function(d,i){
    d.source = node_hash[d.sourceId];
    d.target = node_hash[d.sourceId];
});

var force = d3.layout.force()
              .charge(-1000)
              .nodes(dataNodes)
              .links(dataLinks)
              .size([w,h])
              .linkDistance(100)
              .on("tick",tick)
              .start();

var links = svg.selectAll(".glink")
                .data(froce.links())
                .enter()
                .append("g")
                .attr("class","gLink")
                .append("line")
                .attr("class","link")
                .style("stroke","#ccc");

var node = svg.selectAll(".node")
                .data(froce.nodes())
                .enter()
                .append("g")
                .attr("class","node")
                .call(force.drag);

node
    .append("circle")
    .attr("x", function(d){
        return d.x;
    })
    .attr("y",function(d){
        return d.y;
    })
    .attr("r", 10)
    .style ("fill","white")
    .style("stroke-width",2)
    .style("stroke", "black")
    .call(force.drag);

function tick(){
    links
        .attr("x1",function(d){
            return d.source.x;
        })
        .attr("y1",function(){
            return d.source.y;
        })
        .attr("x2",function{
            return d.target.x;
        })
        .attr("y2",function{
            return d.target.y;
        });

    node.attr("transform",function(d){
        return "translate("+d.x+","+d.y+")";
    });

};
// END JS IN BODY

任何帮助都将不胜感激。