d3js強制指令圖繪製節點，但沒有鏈接

Question

我有力指向圖。它顯示沒有問題的節點，並在控制檯上寫入鏈接 - 源和目標。但不會將其連接到節點。我可以看有沒有領域協調員看到picture

整個代碼是Kibana和更復雜的，但這裏的核心是：

const link = svg.selectAll('link') 
      .data(links) 
      .enter() 
      .append('svg:line') 
      .attr('class', 'link') 
      .style("stroke-width", function (d) {return Math.sqrt(d.value);}) 
      .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;}); 



      force.on("tick", tick); 

     function tick() { 
     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("transform", function(d) { 
          return "translate(" + d.x + "," + d.y + ")"; }); 
       }; 

     var node = svg.selectAll('node') 
      .data(nodes) 
      .enter() 
      .append('circle') 
      .attr('class', 'node') 
      .style("opacity", .9) 
      .attr("r", function(d) { return 10; }) 
      .attr("id", function(d) { return d.id; }) 
      .attr("cy", function(d){return d.y;}) 
      .attr("cx", function(d){return d.x;}) 
      .style("fill", function(d) { return c20(d.value);}) 
      .style("stroke-width", 20); 

const svg = div.append('svg') 
      .attr('width', width) 
      .attr('height', height) 
      .append('g') 
      .attr('transform', 'translate('+ width/2 + ',' + height/3 + ')'); 


     var force = d3.layout.force() 
     .nodes(nodes) 
     .links(links) 
     .charge(-150) 
     .linkDistance(90) 
     .start(); 

我的數據結構：

links = 
    [{"source": 0, "target": 1, "value": 30}, 
    {"source": 0, "target": 2, "value": 5}, 
    {"source": 1, "target": 3, "value": 1}, 
    {"source": 2, "target": 0, "value": 20}] 


nodes =   
[{"ip": "92.15.122.1", "value": 5, id: 0}, 
    {"ip": "12.154.154.22", "value": 20, id: 1}, 
    {"ip": "255.12.11.1", "value": 30, id: 2}, 
    {"ip": "54.55.6.55", "value": 1, id: 3}] 

我覺得問題是將「節點」中的「id」連接到鏈接中的「源」和「目標」。任何想法如何？

Answer 1

您需要設置描邊顏色上link變量

var link = svg.selectAll('link') 
    .data(links) 
    .enter() 
    .append('line') 
    .attr('class', 'link') 
    .style("stroke", 'black') 

查看完整的片段下方。我已經清理它，讓它在Stack代碼片段中運行。

var width = 320, 
 
    height = 240; 
 

 
links = [{ 
 
    "source": 0, 
 
    "target": 1, 
 
    "value": 30 
 
    }, 
 
    { 
 
    "source": 0, 
 
    "target": 2, 
 
    "value": 5 
 
    }, 
 
    { 
 
    "source": 1, 
 
    "target": 3, 
 
    "value": 1 
 
    }, 
 
    { 
 
    "source": 2, 
 
    "target": 0, 
 
    "value": 20 
 
    } 
 
] 
 

 

 
nodes = [{ 
 
    "ip": "92.15.122.1", 
 
    "value": 5, 
 
    id: 0 
 
    }, 
 
    { 
 
    "ip": "12.154.154.22", 
 
    "value": 20, 
 
    id: 1 
 
    }, 
 
    { 
 
    "ip": "255.12.11.1", 
 
    "value": 30, 
 
    id: 2 
 
    }, 
 
    { 
 
    "ip": "54.55.6.55", 
 
    "value": 1, 
 
    id: 3 
 
    } 
 
] 
 

 
var svg = d3.select('body').append('svg') 
 
    .attr('width', width) 
 
    .attr('height', height) 
 
    .attr('transform', 'translate(' + width/2 + ',' + height/3 + ')'); 
 

 
var force = d3.layout.force() 
 
    .size([width, height]) 
 
    .nodes(nodes) 
 
    .links(links); 
 

 

 
function tick() { 
 
    node.attr('r', width/25) 
 
    .attr('cx', function(d) { 
 
     return d.x; 
 
    }) 
 
    .attr('cy', function(d) { 
 
     return d.y; 
 
    }); 
 

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

 
force.on("tick", tick); 
 

 
var link = svg.selectAll('link') 
 
    .data(links) 
 
    .enter() 
 
    .append('line') 
 
    .attr('class', 'link') 
 
    .style("stroke", 'black') 
 
    .style("stroke-width", function(d) { 
 
    return Math.sqrt(d.value); 
 
    }).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;}); 
 

 
    
 

 

 
var node = svg.selectAll('node') 
 
    .data(nodes) 
 
    .enter() 
 
    .append('circle') 
 
    .attr('class', 'node') 
 
    .style("opacity", .9) 
 
    .attr("r", function(d) { 
 
    return 10; 
 
    }) 
 
    .attr("id", function(d) { 
 
    return d.id; 
 
    }) 
 
    .attr("cy", function(d) { 
 
    return d.y; 
 
    }) 
 
    .attr("cx", function(d) { 
 
    return d.x; 
 
    }) 
 
    .style("stroke-width", 20); 
 

 

 

 
force 
 
    .nodes(nodes) 
 
    .links(links) 
 
    .charge(-150) 
 
    .linkDistance(90) 
 
    .start();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>