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

MYデータ構造：

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') 

にストロークの色を設定する必要があります。私はスタックスニペットで実行するためにそれをきれいにしました。それでもエラーがどこか別の場所でなければならないので、動作しない

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>