Javascript 谷歌地图上的D3图形（带链接）_Javascript_Google Maps_D3.js

Javascript 谷歌地图上的D3图形（带链接）

javascript google-maps d3.js

Javascript 谷歌地图上的D3图形（带链接）,javascript,google-maps,d3.js,Javascript,Google Maps,D3.js,我试图通过添加节点（）之间的链接来修改示例编辑：现在我可以通过数组访问坐标了。我仍然有一个问题：显示链接（SVG） html，body，#map{ 宽度：100%；身高：100%；保证金：0；填充：0； } .stations、.stations svg{ 位置：绝对位置； } .车站线{ 位置：绝对位置；笔画：黑色；笔画宽度：2px； } .电台svg{ 宽度：60px；高度：20px；右边填充：100px；字体：10px无衬线； } .车站圈{ 填充物：棕色；笔画：黑

我试图通过添加节点（）之间的链接来修改示例

编辑：现在我可以通过数组访问坐标了。我仍然有一个问题：显示链接（SVG）


html，body，#map{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.stations、.stations svg{
位置：绝对位置；
}
.车站线{
位置：绝对位置；
笔画：黑色；
笔画宽度：2px；
}
.电台svg{
宽度：60px；
高度：20px；
右边填充：100px；
字体：10px无衬线；
}
.车站圈{
填充物：棕色；
笔画：黑色；
笔划宽度：1.5px；
}
//创建谷歌地图…
var map=new google.maps.map（d3.select（“#map”）.node（）{
缩放：7，
中心：新google.maps.LatLng（44.331216,23.927536），
mapTypeId:google.maps.mapTypeId.TERRAIN
});
//加载站点数据。当数据返回时，创建一个覆盖。
d3.json（“test graph.json”，函数（json）{
var overlay=new google.maps.OverlayView（）；
//将覆盖添加到地图时添加容器。
overlay.onAdd=函数（）{
var layer=d3.select（this.getPanes（）.overlayer.append（“div”）
.attr（“类”、“站”）；
//将每个标记绘制为单独的SVG元素。
//我们可以使用单个SVG，但它的大小是多少？
overlay.draw=函数（）{
var projection=this.getProjection（），
填充=10；
var node_coord={}；
var marker=layer.selectAll（“svg”）
.data（json.nodes）
.each（转换）//更新现有标记
.enter（）.append（“svg:svg”）
.每个（转换）
.attr（“类别”、“标记”）；
marker.append（“svg:circle”）
.attr（“r”，5）
.attr（“cx”，填充）
.attr（“cy”，填充）；
//添加一个标签。
marker.append（“svg:text”）
.attr（“x”，填充+7）
.attr（“y”，填充）
.attr（“dy”，“.37em”）
.text（函数（d）{返回d.id；}）；
var markerLink=layer.selectAll（“链接”）
.data（json.links）
.each（pathTransform）//更新现有标记
.enter（）.append（“svg:svg”）
.每个（路径转换）
.attr（“类”、“行”）
.append（“svg:line”）
.样式（“笔划宽度”，5）；
//加一个圆圈。
函数路径变换（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]）；
控制台日志（dsrc）；
console.log（dtrg）；
控制台日志（“源”+d.source）；
控制台日志（“目标”+d.target）；
dsrc=投影。从LATLNGTODIVPIXEL（dsrc）；
dtrg=投影。从LATLNGTODIVPIXEL（dtrg）；
控制台日志（dsrc）；
console.log（dtrg）；
返回d3。选择（此）
.attr（“x1”，dsrc.x-填充）
.attr（“y1”，dsrc.y-填充）
.attr（“x2”，dtrg.x-填充）
.attr（“y2”，dtrg.y-填充）；
}
函数变换（d，i）{
节点坐标[i+”，“+0]=d.lng；
节点坐标[i+，“+1]=d.lat；
d=新的google.maps.LatLng（d.lat，d.lng）；
d=投影。从LatlngToDivPixel（d）；
返回d3。选择（此）
.样式（“左”（d.x-填充）+“px”）
.样式（“顶部”（d.y-填充）+“px”）；
}
};
};
//将覆盖图绑定到地图上…
覆盖.setMap（map）；
});

终于以某种方式实现了

我必须包括jQuery，以便在重画时删除旧的svg:line元素

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

链接转换功能（感谢问题）

函数路径变换（d）{
变量t，b，l，r，w，h，currentSvg；
$（this）.empty（）；//去掉旧的行（不能使用d3.remove（），因为我不能在…之后使用选择器）
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=从LatlngToDivPixel（dsrc）的投影；
d2=从LatlngToDivPixel（dtrg）的投影；
如果（d1.yd2.x）和&（d1.y>d2.y））{
currentSvg.append（“svg:line”）
.style（“笔划宽度”，1）
.style（“笔划”、“黑色”）
.attr（“y1”，0）
.attr（“x1”，0）
.attr（“x2”，r-l）
.attr（“y2”，b-t）；
}如果（（d1.yd2.x））{
currentSvg.append（“svg:line”）
.style（“笔划宽度”，1）
.style（“笔划”、“黑色”）
.attr（“y1”，0）
.attr（“x2”，0）
.attr（“x1”，r-l）
.attr（“y2”，b-t）；
}如果（（d1.xd2.y））{
currentSvg.append（“svg:line”）
.style（“笔划宽度”，1）
.style（“笔划”、“blac”
    {"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}

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

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

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

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

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

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

      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>

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