Come disegnare le linee tra i cerchi?

Sto tentando di disegnare tre cerchi e tracciare linee collegate tra ognuno di questi cerchi.Come disegnare le linee tra i cerchi?

L'obiettivo finale è configurare le cerchie connesse mediante la configurazione di JSON, ma prima di questo sto semplicemente cercando di connettere le cerchie usando i callback e i valori del codice.

Ecco quello che ho finora:

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    </head> 
<body style="overflow: hidden;"> 
<div id="canvas" style="overflow: hidden;"></div> 

<script type="text/javascript"> 
    var graph = { 
     "nodes":[ 
      {"name":"1","group":1, "x" : 100, "y" : 100 , r : 20}, 
      {"name":"2","group":1, "x" : 200, "y" : 150 ,r : 30}, 
      {"name":"3","group":2 , "x" : 300, "y" : 250 , r : 50} 
     ], 
     "links":[ 
      {"source":1,"target":0,"value":1} 
     ] 
    } 

    var width = 2000; 
    var height = 500; 

    var svg = d3.select("#canvas").append("svg") 
      .attr("width", width) 
      .attr("height", height) 
     .append("g"); 

    var lines = svg.attr("class", "line") 
      .selectAll("line").data(graph.links) 
      .enter().append("line") 
      .attr("x1", function(d) { return 50 }) 
      .attr("y1", function(d) { return 50 }) 
      .attr("x2", function(d) { return 100 }) 
      .attr("y2", function(d) { return 100 }) 

    var circles = svg.selectAll("circle") 
      .data(graph.nodes) 
      .enter().append("circle") 
      .style("stroke", "gray") 
      .style("fill", "white") 
      .attr("r", function(d, i){ return d.r }) 
      .attr("cx", function(d, i){ return d.x }) 
      .attr("cy", function(d, i){ return d.y }) 

</script> 
</body> 
</html>

Ma nessun linee sono in fase di elaborazione. Ogni cerchio dovrebbe contenere una singola linea che la collega all'altro cerchio. Sto solo programmando con difficoltà le coordinate x1, y1, x2, y2, ma userò le coordinate degli altri cerchi per determinare le posizioni delle linee. Perché le linee non vengono disegnate? Esistono metodi d3 standard che dovrei utilizzare per collegare questi cerchi?

violino: http://jsfiddle.net/zzz8svuq/10/

Aggiornamento:

Ecco il codice aggiornato che disegna linee collegate tra gli ambienti come configurato in graph.nodes del set di dati:

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    </head> 
<body style="overflow: hidden;"> 
<div id="canvas" style="overflow: hidden;"></div> 

<script type="text/javascript"> 

    var graph = { 
     "nodes": [ 
      {name: "1", "group": 1, x: 100, y: 50, r: 10 , connected : "2"}, 
      {name: "2", "group": 1, x: 200, y: 90, r: 15, connected : "1"}, 
      {name: "3", "group": 2, x: 300, y: 230, r: 25, connected : "1"} 
     ] 
    } 


    $(document).ready(function() { 

     var width = 2000; 
     var height = 500; 

     var svg = d3.select("#canvas").append("svg") 
       .attr("width", width) 
       .attr("height", height) 
       .append("g"); 

     var lines = svg.attr("class", "line") 
       .selectAll("line").data(graph.nodes) 
       .enter().append("line") 
       .style("stroke", "gray") // <<<<< Add a color 
       .attr("x1", function (d, i) { 
        return d.x 
       }) 
       .attr("y1", function (d) { 
        return d.y 
       }) 
       .attr("x2", function (d) { 
        return findAttribute(d.connected).x 
       }) 
       .attr("y2", function (d) { 
        return findAttribute(d.connected).y 
       }) 

     var circles = svg.selectAll("circle") 
       .data(graph.nodes) 
       .enter().append("circle") 
       .style("stroke", "gray") 
       .style("fill", "white") 
       .attr("r", function (d, i) { 
        return d.r 
       }) 
       .attr("cx", function (d, i) { 
        return d.x 
       }) 
       .attr("cy", function (d, i) { 
        return d.y 
       }); 

    }); 

    function findAttribute(name) { 
     for (var i = 0, len = graph.nodes.length; i < len; i++) { 
      if (graph.nodes[i].name === name) 
       return graph.nodes[i]; // Return as soon as the object is found 
     } 
     return null; // The object was not found 
    } 


</script> 
</body> 
</html>

fonte

2014-09-21 blue-sky

È necessario assicurarsi che il le linee hanno un colore di tratto, altrimenti saranno disegnate in bianco e non sarà possibile vederle.

var lines = svg.attr("class", "line") 
      .selectAll("line").data(graph.links) 
      .enter().append("line") 
      .style("stroke", "gray") // <<<<< Add a color 
      .attr("x1", function(d) { return 50 }) 
      .attr("y1", function(d) { return 50 }) 
      .attr("x2", function(d) { return 100 }) 
      .attr("y2", function(d) { return 100 })

fonte

2014-09-21 13:04:55 cyon

Questa è una svista comune: mi sorprende ancora! Gli oggetti SVG hanno riempimento nero ma nessun tratto per impostazione predefinita. Se qualcosa non appare sullo schermo, ispeziona gli elementi per vedere se è lì ma non mostra. –

Come disegnare le linee tra i cerchi?

risposta

Problemi correlati