在谷歌地图叠加层上，如何在 D3 中的 svg 元素之间创建线条

我是 D3 的新手，我想调用我的函数 drawlink 来在我的一些元素之间画线。我尝试向我的链接变量添加一个 each 调用来调用它，即：

  var link = layer.selectAll(".link")
      .data(data.links)
    .enter().append("line")
      .attr("class", "link")
      .each(drawlink);

但这没有用。在我添加这条线之前，我已经得到了谷歌地图绘制的阶段，我的 4 个 svg 元素已经绘制完毕。

我应该怎么做？其他代码改进评论也非常受欢迎。

车站.json

{
  "nodes":[
    {"name":"A","long":0.0000,"lat":51.4800},
    {"name":"B","long":-0.1684,"lat":51.4875},
    {"name":"C","long":-0.2043,"lat":51.5096},
    {"name":"D","long":-0.1269,"lat":51.5295}
  ],
  "links":[
    {"source":0,"target":1},
    {"source":0,"target":2},
    {"source":0,"target":3},
    {"source":2,"target":3} 
  ]
}

索引.html

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.link {
  stroke: #ccc;
  stroke-width: 1.5px;
}
.stations, .stations svg {
  position: absolute;
}
.stations svg {
  width: 60px;
  height: 20px;
  padding-right: 100px;
  font: 12px sans-serif;
}
.stations circle {
  fill: brown;
  stroke: black;
  stroke-width: 1.5px;
}
</style>
</head>
<body>
<div id="map" style="width: 1200px; height: 600px;"></div>
<script type="text/javascript">
// Create the Google Map…
var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 12,
  center: new google.maps.LatLng(51.5195, -0.1269),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});
d3.json("stations.json", function(error, data) {
  if (error) throw error;
  var overlay = new google.maps.OverlayView();
  overlay.onAdd = function() {
    var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("class", "stations");
    overlay.draw = function() {
      var projection = this.getProjection(),
          padding = 10;
      var node = layer.selectAll(".stations")
          .data(data.nodes)
          .each(transform)
        .enter().append("svg")
          .each(transform)
          .attr("class", "node");
      var link = layer.selectAll(".link")
          .data(data.links)
        .enter().append("line")
          .attr("class", "link");
      node.append("circle")
          .attr("r", 4.5)
          .attr("cx", padding)
          .attr("cy", padding);
      node.append("text")
          .attr("x", padding + 7)
          .attr("y", padding)
          .attr("dy", ".31em")
          .text(function(d) { return d.name; });
      function transform(d) {
        d = new google.maps.LatLng(d.lat, d.long);
        d = projection.fromLatLngToDivPixel(d);
        return d3.select(this)
            .style("left", (d.x - padding) + "px")
            .style("top", (d.y - padding) + "px");
      }
      function drawlink(d) {
        link.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });
        }     
    };
  };
  overlay.setMap(map);
});
</script>
</body>
</html>

我会在你的方法上略有偏差。我不会为每个站附加一个svg，而是附加一个svg（如果您需要在站与站之间绘制线条，则必须这样做），然后为每个站附加一个g。然后，这些线在您的链接上轻松循环，计算位置并添加线条：

以下是 3 个主要定位功能：

  function latLongToPos(d){
    var p = new google.maps.LatLng(d.lat, d.long);
    p = projection.fromLatLngToDivPixel(p);
    p.x = p.x - padding;
    p.y = p.y - padding;
    return p;
  }
  function transform(d) {
    var p = latLongToPos(d);
    return d3.select(this)
      .attr("transform","translate(" + p.x + "," + p.y + ")");
  }
  function drawlink(d) {
    var p1 = latLongToPos(data.nodes[d.source]),
        p2 = latLongToPos(data.nodes[d.target]);
    d3.select(this)
      .attr('x1', p1.x)
      .attr('y1', p1.y)
      .attr('x2', p2.x)
      .attr('y2', p2.y)
      .style('fill', 'none')
      .style('stroke', 'steelblue');

完整代码：

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<html>
<head>
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <style>
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    .link {
      stroke: #ccc;
      stroke-width: 1.5px;
    }
    
    .stations,
    .stations svg {
      position: absolute;
    }
    
    .stations svg {
      width: 1200px;
      height: 600px;
      padding-right: 100px;
      font: 12px sans-serif;
    }
    
    .stations circle {
      fill: brown;
      stroke: black;
      stroke-width: 1.5px;
    }
  </style>
</head>
<body>
  <div id="map" style="width: 1200px; height: 600px;"></div>
  <script type="text/javascript">
    // Create the Google Map…
    var map = new google.maps.Map(d3.select("#map").node(), {
      zoom: 12,
      center: new google.maps.LatLng(51.5195, -0.1269),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });
    //d3.json("stations.json", function(error, data) {
    var data = {
      "nodes": [{
        "name": "A",
        "long": 0.0000,
        "lat": 51.4800
      }, {
        "name": "B",
        "long": -0.1684,
        "lat": 51.4875
      }, {
        "name": "C",
        "long": -0.2043,
        "lat": 51.5096
      }, {
        "name": "D",
        "long": -0.1269,
        "lat": 51.5295
      }],
      "links": [{
        "source": 0,
        "target": 1
      }, {
        "source": 0,
        "target": 2
      }, {
        "source": 0,
        "target": 3
      }, {
        "source": 2,
        "target": 3
      }]
    }
    var overlay = new google.maps.OverlayView();
    overlay.onAdd = function() {
      var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("class", "stations");
      overlay.draw = function() {
        
        layer.select('svg').remove();
        
        var projection = this.getProjection(),
          padding = 10;
        var svg = layer.append("svg")
          .attr('width', 1200)
          .attr('height', 600)
        var node = svg.selectAll(".stations")
          .data(data.nodes)
          .enter().append("g")
          .each(transform)
          .attr("class", "node");
        var link = svg.selectAll(".link")
          .data(data.links)
          .enter().append("line")
          .attr("class", "link")
          .each(drawlink);
        node.append("circle")
          .attr("r", 4.5);
        node.append("text")
          .attr("x", 7)
          .attr("y", 0)
          .attr("dy", ".31em")
          .text(function(d) {
            return d.name;
          });
        function latLongToPos(d) {
          var p = new google.maps.LatLng(d.lat, d.long);
          p = projection.fromLatLngToDivPixel(p);
          p.x = p.x - padding;
          p.y = p.y - padding;
          return p;
        }
        function transform(d) {
          var p = latLongToPos(d);
          return d3.select(this)
            .attr("transform", "translate(" + p.x + "," + p.y + ")");
        }
        function drawlink(d) {
          var p1 = latLongToPos(data.nodes[d.source]),
            p2 = latLongToPos(data.nodes[d.target]);
          d3.select(this)
            .attr('x1', p1.x)
            .attr('y1', p1.y)
            .attr('x2', p2.x)
            .attr('y2', p2.y)
            .style('fill', 'none')
            .style('stroke', 'steelblue');
        }
      };
    };
    overlay.setMap(map);
    //});
  </script>
</body>
</html>

相关内容

最新更新

热门标签：