Biểu đồ D3 (có liên kết) trên bản đồ google

Tôi đang cố sửa đổi this ví dụ bằng cách thêm liên kết giữa các nút (related).Biểu đồ D3 (có liên kết) trên bản đồ 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>

Và tệp 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: Bây giờ tôi có thể truy cập vào các tọa độ nhờ vào một mảng. Tôi vẫn gặp sự cố: hiển thị liên kết (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>

Nguồn

2012-09-27 victorsc

Có cách nào đó cuối cùng cũng hoạt động.

Tôi phải bao gồm jQuery để xóa các yếu tố svg: line cũ trên vẽ lại.

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

Added một lớp .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>

Tạo 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");

Vẽ mỗi điểm đánh dấu như một yếu tố SVG riêng biệt. Chúng tôi có thể sử dụng một SVG đơn lẻ, nhưng kích thước của nó là bao nhiêu?

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

Chức năng chuyển đổi liên kết (nhờ câu hỏi his).

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

Đã thêm mảng trong hàm biến đổi để nhận tọa độ nút.

 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>

Nguồn

2012-10-03 10:49:32 victorsc

Nếu bạn đặt tất cả điều này lại với nhau thành một jsfiddle, bạn sẽ trở thành một vị thần trong số những người đàn ông. –

Tuyệt vời! Thật tuyệt vời! –

Chúng tôi có thể ràng buộc các sự kiện trên vòng kết nối không? –

Tôi cố gắng trả lời của bạn, nhưng nó không thực sự làm việc. Sau một vài giờ đổ mồ hôi, tôi cố gắng làm điều đó 'đúng' (ít nhất là đối với tôi). Cảm ơn vì mã, không có nó, tôi vẫn sẽ cố gắng.

Tôi đã tải nó lên http://jsfiddle.net/nom7eLha/. Tôi không biết nhiều d3 (nó trông giống như ma thuật với tôi, tbh), vì vậy mong đợi lỗi newbie.

Json được tải theo cùng định dạng từ 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>

Nguồn

2015-07-18 01:12:12

Biểu đồ D3 (có liên kết) trên bản đồ google

Trả lời

Các vấn đề liên quan