1. Dom
  2. Pytanie i odpowiedź
  3. Wykres D3 (z linkami) na mapach google

Wykres D3 (z linkami) na mapach google

2012-09-27 20 views
5

Próbuję zmodyfikować przykład this, dodając linki między węzłami (related).Wykres D3 (z linkami) na mapach google

<!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>

a plik 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: Teraz mogę przejść współrzędnych dzięki tablicy. Wciąż mam jeden problem: wyświetlanie linków (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>

Źródło

2012-09-27 victorsc

Odpowiedz

3

W końcu udało się.

Musiałem dołączyć jQuery do usuwania starych elementów svg: line podczas przerysowywania.

<!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>

dodał .links klasa:

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

Tworzenie mapy Google ...

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

Draw każdy znacznik jako oddzielny element SVG. Możemy użyć pojedynczego SVG, ale jaki by miał rozmiar? funkcję

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

Link transformacji (dzięki his pytanie).

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

Dodany tablicą w funkcji przekształcania, aby uzyskać współrzędne węzłów.

 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>

Źródło

2012-10-03 10:49:32 victorsc

+5

Jeśli umieścisz to wszystko razem do pracy jsfiddle staniesz się bogiem wśród mężczyzn. –

+0

Awesome! To super fajne! –

+0

Czy możemy powiązać wydarzenia z kręgami? –

0

Próbowałem swoją odpowiedź, ale to naprawdę nie działa. Po kilku godzinach potu udało mi się to zrobić "właściwie" (przynajmniej dla mnie). Dzięki za kod, bez niego nadal bym próbowała.

Przesłałem go do http://jsfiddle.net/nom7eLha/. Nie znam d3 (wygląda na magię, tbh), więc spodziewaj się błędów początkujących.

Załadowany json ma taki sam format z PO.

<!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>

Źródło

2015-07-18 01:12:12

Powiązane problemy

 Powiązane problemy