d3js kraftgerichtetes Diagramm zeichnet Knoten, aber keine Verknüpfungen

Question

Ich habe eine kraftgerichtete Grafik. Es zeigt Knoten ohne Probleme und auf der Konsole schreibt es Links - Quelle und Ziel. Aber verbindet es nicht mit Knoten. Ich kann es sehen kein Feld ist für Koordinatoren picture

Ganzen Code sieht in Kibana ist und komplizierter, aber hier ist der Kern:

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

MEINE Datenstruktur:

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}] 

Ich denke, das Problem ist die Verbindung "ID" von "Knoten" zu "Quelle" und "Ziel" in Links. Irgendeine Idee wie?

Answer 1

Sie müssen die Strichfarbe auf der link Variable

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

Im folgenden sehen Sie den vollständigen Code-Schnipsel setzen. Ich habe es aufgeräumt, damit es in einem Stack-Snippet läuft.

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>