Question

我正在开发一个D3 Force布局，将不同国家/地区显示为圆圈，并显示共享边框的国家/地区作为各自节点之间的链接。

这是数据集 https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json

这是codepen http://codepen.io/redixhumayun/pen/ZLELvG?editors=0010

由于某种原因，节点出现了，但我的链接不是。当我使用DevTools检查它们时，它们的位置为0x0。我不知道为什么会这样。

这是相关代码。

//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);
        })
  }

Answer 1

只需设置线条的颜色：

.attr("stroke", "black")

除此之外，由于您的links数组使用节点的数字索引，因此您无需在力中设置id：

.id(function(d){ return d.id })

以下是您更新的CodePen：http://codepen.io/anon/pen/qRExJe?editors=0010

链接未显示在D3 v4 Force布局中

1 个答案: