javascript - D3力布局仅显示一个链接

Question

我正在处理取自 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 看起来与每个示例都非常相似，我不明白问题出在哪里。

Answer 1

在强制布局中，链接数组中的每个链接都需要通过以下两种方式之一指示其源节点和目标节点:

(i) 将链接的源和目标属性设置为节点数组中相应节点的索引。 例如:如果节点数组为 [X,Y,Z] 并且存在从 X -> Z 的链接，则该链接应表示为 {source: 0, target: 2}

(ii) 将链接的源和目标属性设置为对实际节点的引用 例如:如果节点数组是 [X,Y,Z] 并且存在从 X -> Z 的链接，则该链接应表示为 {source: X, target: Z}

在您的情况下，似乎已经使用正确的格式创建了链接数组。因此，您只需在创建边缘线时将 links 数组作为数据绑定(bind)传递即可。

因此，替换 data(linkArray, function(d) {console.log(d); return d.source.id+'-'+d.target.id;})只需 .data(linkArray)在 graphLinks代码片段很可能可以解决这个问题。

由于整个代码不可用，我没有测试这个解决方案。因此，如果它不能解决问题，请告诉我。