我是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
任何帮助,将不胜感激 .