我最近使用v3库创建了我的第一个力导向图，但现在我需要使用D3版本4库创建相同的图表，但是v4中的方法已经发生了巨大变化，现在我在所有force（）/drag（）方法上都收到错误，这些方法在v4中已不存在。
我的图表基于以下模拟 - http://www.ourd3js.com/wordpress/?p=606 有没有v4库的示例存储库，在那里我可以查看并学习一些函数，以便为此特定图表替换？
编辑：
我的当前代码如下，但我无法完全转换它，例如，节点链接有时非常接近，链接和节点的文本重叠。
我的图表基于以下模拟 - http://www.ourd3js.com/wordpress/?p=606 有没有v4库的示例存储库，在那里我可以查看并学习一些函数，以便为此特定图表替换？
编辑：
我的当前代码如下，但我无法完全转换它，例如，节点链接有时非常接近，链接和节点的文本重叠。
<svg width="960" height="600"></svg>
Javascript 代码:
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var graph = root;
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var width = x;
var height = y;
var img_w = 24;
var img_h = 24;
var k = Math.sqrt(root.nodes.length / (width * height));
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody().strength(-5 / k))
.force("center", d3.forceCenter(width / 2, height / 2));
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line");
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("image")
.attr("width",img_w)
.attr("height",img_h)
.attr("xlink:href",function(d){
return d.image;
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var links_text = svg.selectAll(".linetext")
.data(graph.links)
.enter()
.append("text")
.attr("class","linetext slds-text-heading--small")
.attr("text-anchor", "middle")
.text(function(d){
return '['+d.relation+']';
});
var nodes_text = svg.selectAll(".nodetext")
.data(graph.nodes)
.enter()
.append("text")
.attr("class","nodetext slds-text-heading--label")
.attr("text-anchor", "middle")
.attr("dx",-20)
.attr("dy",20)
.text(function(d){
return (d.subname!=''?(d.subname+': '):'')+d.name;
});
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
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; });
links_text
.attr("x",function(d){ return (d.source.x + d.target.x) / 2; })
.attr("y",function(d){ return (d.source.y + d.target.y) / 2; });
node
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
nodes_text
.attr("x",function(d){ return d.x + 20 })
.attr("y",function(d){ return d.y + img_w/2; });
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
JSON数据字符串：
var root = {
"nodes" : [ {
"subname" : "",
"name" : "Telco Power Case",
"image" : "/node32.png",
"id" : 0
}, {
"subname" : "Contact",
"name" : "Suman Kumar",
"image" : "/subnode32.png.png",
"id" : 1
}, {
"subname" : "Contact",
"name" : "Karla Samuel",
"image" : "/subnode32.png.png",
"id" : 2
}, {
"subname" : "Account",
"name" : "Signa Tech",
"image" : "/subnode32.png.png",
"id" : 3
}, {
"subname" : "",
"name" : "Maven's Case",
"image" : "/node32.png",
"id" : 4
}, {
"subname" : "",
"name" : "Delta Case",
"image" : "/node32.png",
"id" : 5
}, {
"subname" : "Contact",
"name" : "T Browney",
"image" : "/subnode32.png.png",
"id" : 6
}, {
"subname" : "Account",
"name" : "Presto",
"image" : "/subnode32.png.png",
"id" : 7
}, {
"subname" : "Contact",
"name" : "Bob Tannenbaum",
"image" : "/subnode32.png.png",
"id" : 8
}, {
"subname" : "Account",
"name" : "Tesla Power",
"image" : "/subnode32.png.png",
"id" : 9
} ],
"links" : [ {
"target" : 1,
"source" : 0,
"relation" : "Trainee"
}, {
"target" : 2,
"source" : 0,
"relation" : "Manager"
}, {
"target" : 3,
"source" : 0,
"relation" : "Technology"
}, {
"target" : 1,
"source" : 0,
"relation" : "Trainee"
}, {
"target" : 2,
"source" : 0,
"relation" : "Manager"
}, {
"target" : 3,
"source" : 0,
"relation" : "Technology"
}, {
"target" : 2,
"source" : 4,
"relation" : "Expert"
}, {
"target" : 2,
"source" : 5,
"relation" : "Expert"
}, {
"target" : 1,
"source" : 5,
"relation" : "Expert"
}, {
"target" : 6,
"source" : 5,
"relation" : "Trainee"
}, {
"target" : 7,
"source" : 5,
"relation" : "Technology;New Firm"
}, {
"target" : 8,
"source" : 4,
"relation" : "Expert"
}, {
"target" : 9,
"source" : 4,
"relation" : "New Firm"
}, {
"target" : 8,
"source" : 4,
"relation" : "Expert"
}, {
"target" : 9,
"source" : 4,
"relation" : "New Firm"
}, {
"target" : 6,
"source" : 5,
"relation" : "Trainee"
}, {
"target" : 7,
"source" : 5,
"relation" : "Technology;New Firm"
} ]
};
linkDistance现在是d3.forceLink上的 distance（距离）属性，因此在您的代码中，应写为.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(200))。 - Mark