D3强制布局仅显示一个链接
我正在使用从this sample获取的图表，我正在尝试更改其数据以显示从 Spotify 中获取的一些统计信息。
我已经制作了一个示例JSON文件并编辑了脚本以使其适用于新的数据格式，一切似乎都很好。 唯一的问题是我的链接没有显示，我在两个节点之间只有一条边。
这是我的样本JSON：
{
"tracks": [{
"date": "2014-05-11",
"country": "global",
"track_url": "https:\/\/play.spotify.com\/track\/7b71WsDLb8gG0cSyDTFAEW",
"track_name": "Summer",
"artist_name": "Calvin Harris",
"artist_url": "https:\/\/play.spotify.com\/artist\/7CajNmpbOovFoOoasH2HaY",
"album_name": "Summer",
"album_url": "https:\/\/play.spotify.com\/album\/0IGsZsrvIe5AQKvMmVobYq",
"artwork_url": "http:\/\/o.scdn.co\/300\/ca67ba1425e4308104ecae9fc493f3ef96ceb72a",
"num_streams": 8350015,
"index": 0,
"links": [1,
3]
},
{
"date": "2014-05-11",
"country": "global",
"track_url": "https:\/\/play.spotify.com\/track\/3s4U7OHV7gnj42VV72eSZ6",
"track_name": "Rather Be feat. Jess Glynne",
"artist_name": "Clean Bandit",
"artist_url": "https:\/\/play.spotify.com\/artist\/6MDME20pz9RveH9rEXvrOM",
"album_name": "Rather Be feat. Jess Glynne",
"album_url": "https:\/\/play.spotify.com\/album\/4UB0J5V3JsZZtNR360pZ6r",
"artwork_url": "http:\/\/o.scdn.co\/300\/a1babd2524962d4703a6c1aa9dfddcc2018713fd",
"num_streams": 7946735,
"index": 1,
"links": [4,
0,
8]
},
{
"date": "2014-05-11",
"country": "global",
"track_url": "https:\/\/play.spotify.com\/track\/5Sf3GyLEAzJXxZ5mbCPXTu",
"track_name": "Waves - Robin Schulz Radio Edit",
"artist_name": "Mr. Probz",
"artist_url": "https:\/\/play.spotify.com\/artist\/33W1pnW9zScZtYTnAoWnOT",
"album_name": "Waves",
"album_url": "https:\/\/play.spotify.com\/album\/7l4LGPXk2mB80WgXy4VeuB",
"artwork_url": "http:\/\/o.scdn.co\/300\/ccfb05bea829a2dc0c736f591a22eac50c18aa56",
"num_streams": 7117296,
"index": 2,
"links": [3,
6]
},
{
"date": "2014-05-11",
"country": "global",
"track_url": "https:\/\/play.spotify.com\/track\/6PtXobrqImYfnpIxNsJApa",
"track_name": "Bad (feat. Vassy) - Radio Edit",
"artist_name": "David Guetta",
"artist_url": "https:\/\/play.spotify.com\/artist\/1Cs0zKBU1kc0i8ypK3B9ai",
"album_name": "Bad",
"album_url": "https:\/\/play.spotify.com\/album\/6CvEd1L1KJZ8g3wIwCZYvF",
"artwork_url": "http:\/\/o.scdn.co\/300\/2591b40c4b58e2b5ef831f4266b4b96b46c0462d",
"num_streams": 6350375,
"index": 3,
"links": [2,
0,
4,
9]
},
{
"date": "2014-05-11",
"country": "global",
"track_url": "https:\/\/play.spotify.com\/track\/3bTZ9geYjyj9uBIT6gL5N6",
"track_name": "All of Me",
"artist_name": "John Legend",
"artist_url": "https:\/\/play.spotify.com\/artist\/5y2Xq6xcjJb2jVM54GHK3t",
"album_name": "All of Me",
"album_url": "https:\/\/play.spotify.com\/album\/1YdXQgntClL3BhIXB0xpgs",
"artwork_url": "http:\/\/o.scdn.co\/300\/d4b391b75d9f80032fb7124e47ff44291181f63d",
"num_streams": 6295389,
"index": 4,
"links": [1,
3,
5]
},
{
"date": "2014-05-11",
"country": "global",
"track_url": "https:\/\/play.spotify.com\/track\/5jrdCoLpJSvHHorevXBATy",
"track_name": "Dark Horse",
"artist_name": "Katy Perry",
"artist_url": "https:\/\/play.spotify.com\/artist\/6jJ0s89eD6GaHleKKya26X",
"album_name": "PRISM",
"album_url": "https:\/\/play.spotify.com\/album\/5MQBzs5YlZlE28mD9yUItn",
"artwork_url": "http:\/\/o.scdn.co\/300\/96fb8b4d972bba2ac566820985437aa39109b512",
"num_streams": 5982051,
"index": 5,
"links": [4,
6]
},
{
"date": "2014-05-11",
"country": "global",
"track_url": "https:\/\/play.spotify.com\/track\/3oxO64VclwEDBoJWkeneBW",
"track_name": "Fancy",
"artist_name": "Iggy Azalea",
"artist_url": "https:\/\/play.spotify.com\/artist\/5yG7ZAZafVaAlMTeBybKAL",
"album_name": "Fancy",
"album_url": "https:\/\/play.spotify.com\/album\/5oX3sr8ft9IwnI090Xf35t",
"artwork_url": "http:\/\/o.scdn.co\/300\/d71d05ded1704bcf849465dd5e76e196847d1c0a",
"num_streams": 5746330,
"index": 6,
"links": [5,
2]
},
{
"date": "2014-05-11",
"country": "global",
"track_url": "https:\/\/play.spotify.com\/track\/27jdUE1EYDSXZqhjuNxLem",
"track_name": "Magic",
"artist_name": "Coldplay",
"artist_url": "https:\/\/play.spotify.com\/artist\/4gzpq5DPGxSnKTe4SA8HAU",
"album_name": "Magic",
"album_url": "https:\/\/play.spotify.com\/album\/4cCfFozyo6JC8acN8uIP7u",
"artwork_url": "http:\/\/o.scdn.co\/300\/95f5cbdb03db43c16046562c5f85cc2e3f77b596",
"num_streams": 5422672,
"index": 7,
"links": [9,
8]
},
{
"date": "2014-05-11",
"country": "global",
"track_url": "https:\/\/play.spotify.com\/track\/2stPxcgjdSImK7Gizl8ZUN",
"track_name": "The Man",
"artist_name": "Aloe Blacc",
"artist_url": "https:\/\/play.spotify.com\/artist\/0id62QV2SZZfvBn9xpmuCl",
"album_name": "Lift Your Spirit",
"album_url": "https:\/\/play.spotify.com\/album\/14JRI2yc9nKosojndoQxTv",
"artwork_url": "http:\/\/o.scdn.co\/300\/788afaaa762c8a613c21b883ae4f00019cd471ad",
"num_streams": 5351668,
"index": 8,
"links": [1,
7]
},
{
"date": "2014-05-11",
"country": "global",
"track_url": "https:\/\/play.spotify.com\/track\/3cySlItpiPiIAzU3NyHCJf",
"track_name": "Problem",
"artist_name": "Ariana Grande",
"artist_url": "https:\/\/play.spotify.com\/artist\/66CXWjxzNUsdJxJ2JdwvnR",
"album_name": "Problem",
"album_url": "https:\/\/play.spotify.com\/album\/5A6pzfa725ZA3rhDllmX58",
"artwork_url": "http:\/\/o.scdn.co\/300\/667dfa17ba7e03a4a3d99a07ae1c6efb398cf947",
"num_streams": 4590768,
"index": 9,
"links": [7,
3]
}],
"links": [{
"source": 0,
"target": 1,
"weight": 5
},
{
"source": 0,
"target": 3,
"weight": 5
},
{
"source": 1,
"target": 4,
"weight": 5
},
{
"source": 1,
"target": 0,
"weight": 5
},
{
"source": 1,
"target": 8,
"weight": 5
},
{
"source": 2,
"target": 3,
"weight": 5
},
{
"source": 2,
"target": 6,
"weight": 5
},
{
"source": 3,
"target": 2,
"weight": 5
},
{
"source": 3,
"target": 0,
"weight": 5
},
{
"source": 3,
"target": 4,
"weight": 5
},
{
"source": 3,
"target": 9,
"weight": 5
},
{
"source": 4,
"target": 1,
"weight": 5
},
{
"source": 4,
"target": 3,
"weight": 5
},
{
"source": 4,
"target": 5,
"weight": 5
},
{
"source": 5,
"target": 4,
"weight": 5
},
{
"source": 5,
"target": 6,
"weight": 5
},
{
"source": 6,
"target": 5,
"weight": 5
},
{
"source": 6,
"target": 2,
"weight": 5
},
{
"source": 7,
"target": 9,
"weight": 5
},
{
"source": 7,
"target": 8,
"weight": 5
},
{
"source": 8,
"target": 1,
"weight": 5
},
{
"source": 8,
"target": 7,
"weight": 5
},
{
"source": 9,
"target": 7,
"weight": 5
},
{
"source": 9,
"target": 3,
"weight": 5
}]
}
这是我的代码（我没有粘贴所有内容，只是我从原来改变了一些内容）
d3.json(
'latest-new.json',
function(data) {
// Declare the variables pointing to the node & link arrays
var nodeArray = data.tracks;
var linkArray = data.links;
console.log(data.links);
var streamsRange = d3.extent(data.tracks, function(el){
return el.num_streams;
});
minLinkWeight =
Math.min.apply( null, linkArray.map( function(n) {return n.weight;} ) );
maxLinkWeight =
Math.max.apply( null, linkArray.map( function(n) {return n.weight;} ) );
// Add the node & link arrays to the layout, and start it
force
.nodes(nodeArray)
.links(linkArray)
.start();
// A couple of scales for node radius & edge width
var node_size = d3.scale.linear()
.domain(streamsRange) // we know score is in this domain
.range([10,25])
.clamp(true);
var edge_width = d3.scale.pow().exponent(8)
.domain( [minLinkWeight,maxLinkWeight] )
.range([1,3])
.clamp(true);
/* Add drag & zoom behaviours */
svg.call( d3.behavior.drag()
.on("drag",dragmove) );
svg.call( d3.behavior.zoom()
.x(xScale)
.y(yScale)
.scaleExtent([1, 6])
.on("zoom", doZoom) );
// ------- Create the elements of the layout (links and nodes) ------
var networkGraph = svg.append('svg:g').attr('class','grpParent');
// links: simple lines
var graphLinks = networkGraph.append('svg:g').attr('class','grp gLinks')
.selectAll("line")
.data(linkArray, function(d) {console.log(d); return d.source.id+'-'+d.target.id;} )
.enter().append("line")
.style('stroke-width', function(d) { return edge_width(d.weight);} )
.attr("class", "link");
// nodes: an SVG circle
var graphNodes = networkGraph.append('svg:g').attr('class','grp gNodes')
.selectAll("circle")
.data( nodeArray, function(d){return d.track_name} )
.enter().append("svg:circle")
.attr('id', function(d) { return "c" + d.index; } )
.attr('class', function(d) { return 'node level'+Math.round(Math.random()*10);} )
.attr('r', function(d) { return node_size(d.num_streams); } )
.attr('pointer-events', 'all')
//.on("click", function(d) { highlightGraphNode(d,true,this); } )
.on("click", function(d) { showMoviePanel(d); } )
.on("mouseover", function(d) { highlightGraphNode(d,true,this); } )
.on("mouseout", function(d) { highlightGraphNode(d,false,this); } );
// labels: a group with two SVG text: a title and a shadow (as background)
var graphLabels = networkGraph.append('svg:g').attr('class','grp gLabel')
.selectAll("g.label")
.data( nodeArray, function(d){return d.track_name} )
.enter().append("svg:g")
.attr('id', function(d) { return "l" + d.index; } )
.attr('class','label');
...
);
我的猜测是这方面存在问题：
var graphLinks = networkGraph.append('svg:g').attr('class','grp gLinks')
.selectAll("line")
.data(linkArray, function(d) {console.log(d); return d.source.id+'-'+d.target.id;} )
.enter().append("line")
.style('stroke-width', function(d) { return edge_width(d.weight);} )
.attr("class", "link");
因为d.source.id和d.targer.id null （我的数据中没有id字段）。
所以我想用track_url或index替换它们，只是为了给出一些现有属性，看看会发生什么。
使用之前的某个属性使我的图形成为完整的图形，因为每个节点都连接到其他节点。
我很确定我做错了什么，但我的JSON看起来与每个例子非常相似，我不明白问题出在哪里。
1 个答案:
答案 0 :(得分：1)
在强制布局中，links数组中的每个链接都需要以下列两种方式之一指示其源节点和目标节点：
（i）将链接的源和目标属性设置为节点数组中相应节点的索引。 例如：如果节点数组是[X，Y，Z]并且存在来自X的链接 - > Z，然后该链接应表示为{source：0，target：2}
（ii）将链接的源和目标属性设置为对实际节点的引用 例如：如果节点数组是[X，Y，Z]并且存在来自X的链接 - > Z，然后该链接应表示为{source：X，target：Z}
在您的情况下，似乎已经使用正确的格式创建了链接数组。因此，您只需在创建边线时将链接数组作为数据绑定传递。
因此，在data(linkArray, function(d) {console.log(d); return d.source.id+'-'+d.target.id;})代码段中仅使用.data(linkArray)替换graphLinks应该最有可能解决问题。
由于整个代码不可用，我没有测试这个解决方案。所以，如果它没有解决问题，请告诉我。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？