4
私は最近、v3ライブラリを使用して最初の強制的な有向グラフを作成しましたが、D3バージョン4ライブラリを使用して同じグラフを作成する必要がありますが、メソッドがv4で大幅に変更されました。 v4には存在しない3つのforce（）/ drag（）メソッドがすべて存在します。D3 v3 Force DirectedグラフをD3 v4ライブラリの実装に変換する際に問題がありますか？
私のグラフは以下のモックアップに基づいている - http://www.ourd3js.com/wordpress/?p=606
私が見て、私はこのために置き換えることができ、いくつかの機能を学ぶことができD3どこかのv4のライブラリに作成されたサンプルのリポジトリがあります特定のチャート？
EDIT：
が私の現在のコードは次のように見えますが、私はそれを完全に変換することができないんだけどは、例えば、ノードのリンクは時々リンクとノードのテキストが重なっている非常に接近しています。
<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"
} ]
};
のみのw誰でもあなたのコードを見ているのを助けることができます... –
sry、私はちょうど私のコードセットで質問を更新しました。私は既にD3バージョン4の機能に基づいてそれを修正しようとしましたが、正確に動作させることはできません。現在、ノードとテキストは重複しています。私はv3のlinkDistance関数で提供できるノード間の固定リンク/エッジの長さを提供することができません。 – VarunC
私はこの例に従おうとしています - http://bl.ocks.org/mbostock/2675ff61ea5e063ede2b5d63c08020c7、私は2つのエッジの間にも画像ノードを中心に置くことができません。現在、画像の配置はエッジ/リンクの開始時から開始されています。 – VarunC