0
異なる国を円で表示し、境界を共有する国をそれぞれのノード間のリンクとして表示するD3 Forceレイアウトを開発中です。D3 v4のリンクが表示されない
はここでここで、ノードが現れ何らかの理由でcodepen http://codepen.io/redixhumayun/pen/ZLELvG?editors=0010
あるデータセット https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json
ですが、私のリンクはしないでください。 DevToolsを使用してそれらを検査すると、DevToolsの位置は0x0になります。なぜこのことが分かりませんか？
ここに関連コードがあります。あなたのlinks配列は、ノードの数値インデックスを使用しているため、あなたが力にidを設定する必要はありませんが、そのほかに
.attr("stroke", "black")
：ただ、線の色を設定し
//Creating force layout simulation object
var simulation = d3.forceSimulation(data_nodes)
.force('link', d3.forceLink().id(function(d){ return d.id }))
.force('charge', d3.forceManyBody())
.force('center', d3.forceCenter(width/2, height/2));
//creating a variable for the links where the data will be stored
var link = svg.selectAll('.link')
.append('g')
.data(data_links)
.enter().append('line')
.attr('class', 'link')
.attr('stroke-width', function(d){ return 8 })
simulation
.nodes(data_nodes)
.on('tick', ticked);
simulation.force('link')
.links(link);
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; });
node.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; })
.on('mouseover', function(d){
console.log(d.country);
})
}