Grafico D3 (con collegamenti) su google maps

Sto tentando di modificare l'esempio this aggiungendo i collegamenti tra i nodi (related).Grafico D3 (con collegamenti) su google maps

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script> 
    <style type="text/css"> 

html, body, #map { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.stations, .stations svg { 
    position: absolute; 
} 

.stations link { 
    position: absolute; 
stroke: black; 
stroke-width: 2px; 
} 

.stations svg { 
    width: 60px; 
    height: 20px; 
    padding-right: 100px; 
    font: 10px sans-serif; 
} 

.stations circle { 
    fill: brown; 
    stroke: black; 
    stroke-width: 1.5px; 
} 

    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script type="text/javascript"> 

// Create the Google Map… 
var map = new google.maps.Map(d3.select("#map").node(), { 
    zoom: 7, 
    center: new google.maps.LatLng(44.331216, 23.927536), 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
}); 

// Load the station data. When the data comes back, create an overlay. 
d3.json("test-graph.json", function(json) { 
    var overlay = new google.maps.OverlayView(); 

    // Add the container when the overlay is added to the map. 
    overlay.onAdd = function() { 
    var layer = d3.select(this.getPanes().overlayLayer).append("div") 
     .attr("class", "stations"); 

    // Draw each marker as a separate SVG element. 
    // We could use a single SVG, but what size would it have? 
    overlay.draw = function() { 
     var projection = this.getProjection(), 
      padding = 10; 


     var markerLink = layer.selectAll("link") 
     .data(json.links) 
     .each(pathTransform) // update existing markers 
    .enter().append("line") 
     .each(pathTransform) 
     .attr("class", "link"); 

     var marker = layer.selectAll("svg") 
      .data(json.nodes) 
      .each(transform) // update existing markers 
     .enter().append("svg:svg") 
      .each(transform) 
      .attr("class", "marker"); 



     // Add a circle. 
     marker.append("svg:circle") 
      .attr("r", 5) 
      .attr("cx", padding) 
      .attr("cy", padding); 

     // Add a label. 
     marker.append("svg:text") 
      .attr("x", padding + 7) 
      .attr("y", padding) 
      .attr("dy", ".37em") 
      .text(function(d) { return d.id; }); 

     function pathTransform(d) { 

     dsrc = new google.maps.LatLng(d.source.lat, d.source.lng); 
     dtrg = new google.maps.LatLng(d.target.lat, d.target.lng); 
     dsrc = projection.fromLatLngToDivPixel(dsrc); 
     dtrg = projection.fromLatLngToDivPixel(dtrg); 
     return d3.select(this) 
      .attr("x1", dsrc.x - padding) 
      .attr("y1", dsrc.y - padding) 
      .attr("x2", dtrg.x - padding) 
      .attr("y2", dtrg.y - padding); 

     } 

     function transform(d) { 

     d = new google.maps.LatLng(d.lat, d.lng); 
     d = projection.fromLatLngToDivPixel(d); 

     return d3.select(this) 
      .style("left", (d.x - padding) + "px") 
      .style("top", (d.y - padding) + "px"); 
     } 
    }; 
    }; 

    // Bind our overlay to the map… 
    overlay.setMap(map); 
}); 

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

e il file JSON:

{"directed": true, "graph": [], "nodes": [ 
{"lat": 44.391643516091975, "lng": 23.159677682342053, "id": "1:a"}, 
{"lat": 44.315988, "lng": 23.818359, "id": "a:a::"}, 
{"lat": 44.29844994776969, "lng": 24.402314492323608, "id": "b:b"}, 
{"lat": 44.351118152120485, "lng": 23.341791630955303, "id": "a:c"}, 
{"lat": 44.889424527442685, "lng": 23.960970697645276, "id": "e:d"}, 
{"lat": 43.46084400349923, "lng": 23.975774627524885, "id": "d:6104:1"}, 
{"lat": 44.64680010013528, "lng": 23.20292820976948, "id": "c:6104:2"}, 
{"lat": 44.40446080879215, "lng": 23.953536570796015, "id": "b:6104:3"}, 
{"lat": 44.18593375168617, "lng": 23.769879901486856, "id": "af:6104:4"}, 
{"lat": 44.09051846584001, "lng": 24.14130778735744, "id": "aaaa3bab:3d:7305"}, 
{"lat": 44.66376251969314, "lng": 23.77379490100736, "id": "aaaa3bab:3d:5507"}, 
{"lat": 44.6240449587762, "lng": 24.08347249542858, "id": "aaaa3bab:3d:6f06"}, 
{"lat": 45.00138334367271, "lng": 24.092331272179138, "id": "aaaa3bab:3d:1306"}, 
{"lat": 44.55033831045195, "lng": 24.312914121854526, "id": "aaaa3bab:3c:ef05"}, 
{"lat": 44.74421652327631, "lng": 24.728457702115804, "id": "aaaa3bab:3c:ea03"}, 
{"lat": 43.79401723931746, "lng": 23.77846416630604, "id": "aaaa3bab:3d:7200"}, 
{"lat": 43.67351687345779, "lng": 23.00140978137842, "id": "aaaa3bab:3d:5d07"}, 
{"lat": 43.87692500855015, "lng": 24.28543591328852, "id": "aaaa3bab:3d:550b"}, 
{"lat": 44.28189405244278, "lng": 23.972410391551893, "id": "aaaa3bab:3d:2706"}, 
{"lat": 43.94916218711252, "lng": 23.9733463072956, "id": "aaaa3bab:3d:2704"}, 
{"lat": 44.61479884874806, "lng": 24.27581898293906, "id": "aaaa3bab:3d:2608"}, 
{"lat": 44.92223011339065, "lng": 23.505887513934034, "id": "aaaa3bab:3d:6502"}, 
{"lat": 44.20117807597118, "lng": 23.70555450810448, "id": "aaaa3bab:3d:2603"}, 
{"lat": 43.547714841247966, "lng": 24.56985383484244, "id": "aaaa3bab:3d:2601"}, 
{"lat": 43.92116991202797, "lng": 22.82805535024416, "id": "aaaa3bab:3d:5803"}, 
{"lat": 44.56587414638437, "lng": 22.970799697228976, "id": "aaaa3bab:3d:7406"}, 
{"lat": 44.10230727065641, "lng": 23.701204095342597, "id": "aaaa3bab:3d:7407"}, 
{"lat": 45.25416535851712, "lng": 24.434312172789625, "id": "aaaa3bab:3d:7404"}, 
{"lat": 44.91647619491961, "lng": 23.678252259828515, "id": "aaaa3bab:3d:7405"}, 
{"lat": 45.03473433359779, "lng": 24.07596179597473, "id": "aaaa3bab:3d:7402"}, 
{"lat": 45.16855171992733, "lng": 23.435986773864467, "id": "aaaa3bab:3d:7403"}, 
{"lat": 44.553669079256146, "lng": 23.05123326220677, "id": "aaaa3bab:3d:7400"}, 
{"lat": 43.32871087231798, "lng": 23.325707869122013, "id": "aaaa3bab:3d:5308"}, 
{"lat": 43.40444516345915, "lng": 23.485798521785892, "id": "aaaa3bab:3c:f107"}, 
{"lat": 43.9435337313432, "lng": 22.968285824722354, "id": "aaaa3bab:3d:7401"}, 
{"lat": 44.74549949495889, "lng": 22.832034225254052, "id": "aaaa3bab:3d:7408"}, 
{"lat": 44.34901730307382, "lng": 24.33506529636527, "id": "aaaa3bab:3d:7409"}, 
{"lat": 43.53125851464172, "lng": 24.763229039168245, "id": "aaaa3bab:3d:6602"}, 
{"lat": 44.155575603194634, "lng": 23.250881840942217, "id": "aaaa3bab:3c:e300"}], 
"links": [ 
{"source": 1, "target": 25}, 
{"source": 1, "target": 26}, 
{"source": 1, "target": 27}, 
{"source": 1, "target": 28}, 
{"source": 1, "target": 29}, 
{"source": 1, "target": 30}, 
{"source": 1, "target": 31}, 
{"source": 1, "target": 34}, 
{"source": 1, "target": 35}, 
{"source": 1, "target": 36}, 
{"source": 3, "target": 5}, 
{"source": 3, "target": 6}, 
{"source": 4, "target": 15}, 
{"source": 4, "target": 9}, 
{"source": 5, "target": 19}, 
{"source": 5, "target": 23}, 
{"source": 6, "target": 18}, 
{"source": 6, "target": 20}, 
{"source": 7, "target": 22}, 
{"source": 8, "target": 37}, 
{"source": 8, "target": 3}, 
{"source": 10, "target": 11}, 
{"source": 17, "target": 21}, {"source": 18, "target": 13}, {"source": 18, "target": 14}, {"source": 19, "target": 33}, {"source": 19, "target": 38}, {"source": 23, "target": 2}, {"source": 25, "target": 10}, {"source": 28, "target": 4}, {"source": 28, "target": 17}, {"source": 29, "target": 32}, {"source": 32, "target": 25}, {"source": 34, "target": 24}, {"source": 35, "target": 8}, {"source": 35, "target": 16}, {"source": 37, "target": 7}, {"source": 37, "target": 12}], "multigraph": false}

Edit: Ora posso accedere alle coordinate grazie ad un array. Ho ancora un problema: che mostra i link (SVG).

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script> 
    <style type="text/css"> 

html, body, #map { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.stations, .stations svg { 
    position: absolute; 
} 

.stations line { 
    position: absolute; 
stroke: black; 
stroke-width: 2px; 
} 

.stations svg { 
    width: 60px; 
    height: 20px; 
    padding-right: 100px; 
    font: 10px sans-serif; 
} 

.stations circle { 
    fill: brown; 
    stroke: black; 
    stroke-width: 1.5px; 
} 

    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script type="text/javascript"> 

// Create the Google Map… 
var map = new google.maps.Map(d3.select("#map").node(), { 
    zoom: 7, 
    center: new google.maps.LatLng(44.331216, 23.927536), 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
}); 

// Load the station data. When the data comes back, create an overlay. 
d3.json("test-graph.json", function(json) { 
    var overlay = new google.maps.OverlayView(); 

    // Add the container when the overlay is added to the map. 
    overlay.onAdd = function() { 
    var layer = d3.select(this.getPanes().overlayLayer).append("div") 
     .attr("class", "stations"); 

    // Draw each marker as a separate SVG element. 
    // We could use a single SVG, but what size would it have? 
    overlay.draw = function() { 
     var projection = this.getProjection(), 
      padding = 10; 


     var node_coord = {}; 

     var marker = layer.selectAll("svg") 
      .data(json.nodes) 
      .each(transform) // update existing markers 
     .enter().append("svg:svg") 
      .each(transform) 
      .attr("class", "marker"); 
    marker.append("svg:circle") 
      .attr("r", 5) 
      .attr("cx", padding) 
      .attr("cy", padding); 

     // Add a label. 
     marker.append("svg:text") 
      .attr("x", padding + 7) 
      .attr("y", padding) 
      .attr("dy", ".37em") 
      .text(function(d) { return d.id; }); 


    var markerLink = layer.selectAll("link") 
     .data(json.links) 
     .each(pathTransform) // update existing markers 
    .enter().append("svg:svg") 
     .each(pathTransform) 
     .attr("class", "line") 
    .append("svg:line") 
    .style("stroke-width", 5); 

     // Add a circle. 

    function pathTransform(d) { 
     console.log(node_coord[d.source-1 + "," + 1]); 
     dsrc = new google.maps.LatLng(node_coord[d.source-1 + "," + 1], node_coord[d.source-1 + "," + 0]); 
     dtrg = new google.maps.LatLng(node_coord[d.target-1 + "," + 1], node_coord[d.target-1 + "," + 0]); 
     console.log(dsrc); 
     console.log(dtrg); 
     console.log("source" + d.source); 
     console.log("target" + d.target); 
     dsrc = projection.fromLatLngToDivPixel(dsrc); 
     dtrg = projection.fromLatLngToDivPixel(dtrg); 
     console.log(dsrc); 
     console.log(dtrg); 

     return d3.select(this) 
      .attr("x1", dsrc.x - padding) 
      .attr("y1", dsrc.y - padding) 
      .attr("x2", dtrg.x - padding) 
      .attr("y2", dtrg.y - padding); 

     } 

     function transform(d,i) { 
      node_coord[i + "," + 0] = d.lng; 
      node_coord[i + "," + 1] = d.lat; 

     d = new google.maps.LatLng(d.lat, d.lng); 
     d = projection.fromLatLngToDivPixel(d); 

     return d3.select(this) 
      .style("left", (d.x - padding) + "px") 
      .style("top", (d.y - padding) + "px"); 
     } 
    }; 
    }; 

    // Bind our overlay to the map… 
    overlay.setMap(map); 
}); 

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

fonte

2012-09-27 victorsc

Finalmente riuscito.

ho dovuto includere jQuery per la rimozione della vecchia svg: elementi lineari sul ridisegno.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

Aggiunto una classe .links:

<style type="text/css"> 
html, body, #map { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.stations, .stations svg { 
    position: absolute; 
} 


.links { 
    //width: 100%; 
    //height: 100%; 

position: absolute; 
} 

.stations svg { 
    width: 60px; 
    height: 20px; 
    padding-right: 100px; 
    font: 10px sans-serif; 
} 

.stations circle { 
    fill: brown; 
    stroke: black; 
    stroke-width: 1.5px; 
} 

    </style> 
</head>

Creare la Google Map ...

<body> 
    <div id="map"></div> 
    <script type="text/javascript"> 


var map = new google.maps.Map(d3.select("#map").node(), { 
    zoom: 7, 
    center: new google.maps.LatLng(44.331216, 23.927536), 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
}); 

// Load the station data. When the data comes back, create an overlay. 
d3.json("test-graph.json", function(json) { 
    var overlay = new google.maps.OverlayView(); 

    // Add the container when the overlay is added to the map. 
    overlay.onAdd = function() { 

    var layer = d3.select(this.getPanes().overlayLayer) 
     .append("div") 
     .attr("height", "100%") 
     .attr("width", "100%") 
     .attr("class", "stations");

disegnare ogni marcatore come un elemento SVG separata. Potremmo usare un singolo SVG, ma che dimensioni avrebbe?

overlay.draw = function() { 
    var radius = 5; 
    var projection = this.getProjection(), 
     padding = 10; 


    var node_coord = {}; 

     var marker = layer.selectAll("svg") 
     .data(json.nodes) 
     .each(transform) // update existing markers 
    .enter().append("svg:svg") 
     .each(transform) 
     .attr("class", "marker"); 
marker.append("svg:circle") 
     .attr("r", radius) 
     .attr("cx", padding) 
     .attr("cy", padding); 

    // Add a label. 
    marker.append("svg:text") 
     .attr("x", padding + 7) 
     .attr("y", padding) 
     .attr("dy", ".37em") 
     .text(function(d) { return d.id; }); 


var markerLink = layer.selectAll(".links") 
    .data(json.links) 
    .each(pathTransform) // update existing markers  
.enter().append("svg:svg") 
.attr("class", "links") 
    .each(pathTransform);

Il collegamento funzione di trasformazione (grazie a his questione).

function pathTransform(d) { 
     var t, b, l, r, w, h, currentSvg; 
     $(this).empty(); // get rid of the old lines (cannot use d3 .remove() because i cannot use selectors after ...) 

     dsrc = new google.maps.LatLng(node_coord[d.source-1 + "," + 1], node_coord[d.source-1 + "," + 0]); 
     dtrg = new google.maps.LatLng(node_coord[d.target-1 + "," + 1], node_coord[d.target-1 + "," + 0]); 
     d1 = projection.fromLatLngToDivPixel(dsrc); 
     d2 = projection.fromLatLngToDivPixel(dtrg); 
     if (d1.y < d2.y) { 
      t = d1.y; 
      b = d2.y; 
     } else { 
      t = d2.y; 
      b = d1.y; 
     } 
     if (d1.x < d2.x) { 
      l = d1.x; 
      r = d2.x; 
     } else { 
      l = d2.x; 
      r = d1.x; 
     } 
     currentSvg = d3.select(this) 

      .style("left", (l + radius) + "px") 
      .style("top", (t + radius) + "px") 
      .style("width", (r - l - radius) + "px") 
      .style("height", (b - t - radius) + "px"); 
    // drawing the diagonal lines inside the svg elements. We could use 2 cases instead of for but maybe you will need to orient your graph (so you can use some arrows) 
    if ((d1.y < d2.y) && (d1.x < d2.x)) { 
     currentSvg.append("svg:line") 
      .style("stroke-width", 1) 
      .style("stroke", "black") 
      .attr("y1", 0) 
      .attr("x1", 0) 
      .attr("x2", r-l) 
      .attr("y2", b-t); 
     } else if ((d1.x > d2.x) && (d1.y > d2.y)){ 
     currentSvg.append("svg:line") 
      .style("stroke-width", 1) 
      .style("stroke", "black") 
      .attr("y1", 0) 
      .attr("x1", 0) 
      .attr("x2", r-l) 
      .attr("y2", b-t); 
     } else if ((d1.y < d2.y) && (d1.x > d2.x)){ 
      currentSvg.append("svg:line") 
       .style("stroke-width", 1) 
       .style("stroke", "black") 
       .attr("y1", 0) 
       .attr("x2", 0) 
       .attr("x1", r-l) 
       .attr("y2", b-t); 
      } else if ((d1.x < d2.x) && (d1.y > d2.y)){ 
      currentSvg.append("svg:line") 
       .style("stroke-width", 1) 
       .style("stroke", "black") 
       .attr("y1", 0) 
       .attr("x2", 0) 
       .attr("x1", r-l) 
       .attr("y2", b-t); 
      } else { 
      console.log("something is wrong!!!"); 
      } 


     return currentSvg; 
    }

Aggiunto un array nella funzione di trasformazione per ottenere le coordinate del nodo.

 function transform(d,i) { 
     console.log(i); 
      node_coord[i + "," + 0] = d.lng; 
      node_coord[i + "," + 1] = d.lat; 

     d = new google.maps.LatLng(d.lat, d.lng); 
     d = projection.fromLatLngToDivPixel(d); 

     return d3.select(this) 
      .style("left", (d.x - padding) + "px") 
      .style("top", (d.y - padding) + "px"); 
     } 
layer.append("div") 
    .attr("class", "stations.line"); 

    }; 

    }; 

    // Bind our overlay to the map… 
    overlay.setMap(map); 
}); 

</script>

fonte

2012-10-03 10:49:32 victorsc

Se metti tutto questo insieme in un jsfiddle funzionante diventerai un dio tra gli uomini. –

Fantastico! È fantastico! –

Possiamo associare gli eventi alle cerchie? –

ho provato la tua risposta, ma non funzionava. Dopo un paio d'ore di sudore, sono riuscito a farlo 'correttamente' (almeno per me). Grazie per il codice, senza di esso, ci proverei ancora.

ho caricato a http://jsfiddle.net/nom7eLha/. Non so molto di d3 (mi sembra magico per me, tbh), quindi aspettatevi errori da principianti.

Il json loaded segue lo stesso formato dalla OP.

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script src="./blockly/blockly_compressed.js"></script> 
<script src="./blockly/blocks_compressed.js"></script> 
<script src="./blockly/blocks/MathMorpho.js"></script> 
<script src="./blockly/python_compressed.js"></script> 
<script src="./blockly/generators/python/MathMorpho.js"></script> 
<script src="./blockly/msg/js/en.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script src="http://d3js.org/topojson.v1.min.js"></script> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js">    </script> 
<style type="text/css"> 
    html, 
    body, 
    #map { 
     width: 100%; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 

    .stations, 
    .stations svg { 
     position: absolute; 
     margin: 0 auto; 
    } 

    .links { 
     position: absolute; 
    } 

    .stations svg { 
     width: 20px; 
     height: 20px; 
     margin: 0 auto; 
     z-index: 4; 
    } 

    .stations circle { 
     fill: blue; 
     stroke: none; 
     stroke-width: 1px; 
    } 
</style> 
</head> 

<body> 
<div id="map"></div> 
<script type="text/javascript"> 
    var map = new google.maps.Map(d3.select("#map").node(), { 
     zoom: 7, 
     center: new google.maps.LatLng(-22.1629209, -47.9922608), 
     mapTypeId: google.maps.MapTypeId.MAP 
    }); 

    d3.json("test-graph.json", function(json) { 
     var overlay = new google.maps.OverlayView(); 

     // Add the container when the overlay is added to the map. 
     overlay.onAdd = function() { 

      var layer = d3.select(this.getPanes().overlayLayer) 
       .append("div") 
       .attr("height", "100%") 
       .attr("width", "100%") 
       .attr("class", "stations"); 
      overlay.draw = function() { 
       var radius = 5; 
       var projection = this.getProjection(), 
        padding = 10; 


       var node_coord = {}; 

       var marker = layer.selectAll("svg") 
        .data(json.nodes) 
        .each(transform) // update existing markers 
        .enter().append("svg:svg") 
        .each(transform) 
        .attr("class", "marker"); 
       marker.append("svg:circle") 
        .attr("r", radius) 
        .attr("cx", padding) 
        .attr("cy", padding); 


       var markerLink = layer.selectAll(".links") 
        .data(json.links) 
        .each(pathTransform) // update existing markers  
        .enter().append("svg:svg") 
        .attr("class", "links") 
        .each(pathTransform); 

       function pathTransform(d) { 
        var t, b, l, r, w, h, currentSvg; 
        var d1=new Object(); 
        var d2=new Object(); 
        $(this).empty(); 
     d1.x=node_coord[d.source + "," + 0] 
     d1.y=node_coord[d.source + "," + 1] 
     d2.x=node_coord[d.target + "," + 0] 
     d2.y=node_coord[d.target + "," + 1] 

        if (d1.y < d2.y) { 
         t = d1.y; 
         b = d2.y; 
        } else { 
         t = d2.y; 
         b = d1.y; 
        } 
        if (d1.x < d2.x) { 
         l = d1.x; 
         r = d2.x; 
        } else { 
         l = d2.x; 
         r = d1.x; 
        } 
        currentSvg = d3.select(this) 
      .style("z-index","1") 
      .style("left", (l + 2*radius) + "px") 
         .style("top", (t + 2*radius) + "px") 
         .style("width", (r - l + 2*radius) + "px") 
         .style("height", (b - t + 2*radius) + "px"); 


        var x1=0,y1=0,x2=0,y2=0; 
        if ((d1.y < d2.y) && (d1.x < d2.x)) { 
      x2=r-l; 
      y2=b-t; 
        } else if ((d1.x > d2.x) && (d1.y > d2.y)) { 
      x2=r-l; 
      y2=b-t; 
        } else if ((d1.y < d2.y) && (d1.x > d2.x)) { 
      x1=r-l; 
      y2=b-t; 
        } else if ((d1.x < d2.x) && (d1.y > d2.y)) { 
      x1=r-l; 
      y2=b-t; 
        } 
        currentSvg.append("svg:line") 
          .style("stroke-width", 2) 
          .style("stroke", "black") 
          .attr("x1", x1) 
          .attr("y1", y1) 
          .attr("x2", x2) 
          .attr("y2", y2); 

        return currentSvg; 
       } 

       function transform(d, i) { 
        d = new google.maps.LatLng(d.lat, d.lng); 
        d = projection.fromLatLngToDivPixel(d); 

        node_coord[i + "," + 0] = d.x; 
        node_coord[i + "," + 1] = d.y; 

        return d3.select(this) 
         .style("left", (d.x) + "px") 
         .style("top", (d.y) + "px"); 
       } 
       layer.append("div") 
        .attr("class", "stations.line"); 

      }; 

     }; 

     // Bind our overlay to the map… 
     overlay.setMap(map); 
    }); 
</script>

fonte

2015-07-18 01:12:12

Grafico D3 (con collegamenti) su google maps

risposta

Problemi correlati