d3圆圈在传单地图 [英] d3 circles on a leaflet map

问题描述

我使用以下代码生成带圆圈的地图;

I am using the following code to generate a map with circles;

http://jsbin.com/OTaKEDor / 2 / edit

<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

<script type='text/javascript' id='lt_ws' src='http://localhost:52656/socket.io/lighttable/ws.js'></script>

<div id="map" style="width: 100%; height: 100%; position: relative;" class="leaflet-container leaflet-fade-anim" tabindex="0">
</div>

<script>
    var map = L.map('map').setView([51.82, 5.861], 11); 
  L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: ''
  }).addTo(map);

  var data = [ [5.861797,51.822823],[5.861843,51.822815],[5.5102863,51.78242],[5.8564305,51.821033],[5.859349,51.822502] ];

  var plotData = data.map( function( coord ){ 
    return map.latLngToLayerPoint( [ coord[1], coord[0] ] );
  });

  var svg = d3.select( map.getPanes().overlayPane ).append("svg"), 
      g   = svg.append("g").attr("class", "leaflet-zoom-hide");

  g.selectAll("circle").data( plotData ).enter().append("circle")
    .attr("cx", function(d){ return d.x; } )
    .attr("cy", function(d){ return d.y; } )
    .attr("r", 25)
    .style("fill", "black");

</script>

我将坐标映射到小叶，使它放在正确的位置。问题是，圆圈放在传单上的svg上，谷歌devtools确认这一点，但他们没有得到正确的属性，他们保持不可见。

I map the coordinates to leaflet such that it is placed on the right spot. The problem is that the circles are placed on the svg on the leaflet map, google devtools confirms this, but they dont get the right attributes, they remain invisible.

查看屏幕截图;

>

有没有什么我忘记了吗？

Is there something that I have forgotten to do?

推荐答案

这个工作，这是更好的代码，现在的数据绑定到svg元素允许更多的交互性;

this worked, this is better code as well, now the data binds to the svg elements which allows for much more interactivity;

function drawCircles(){
  var data = [
    { "coords" : [ 37.8 , - 96.8 ], "time" : 1 },
    { "coords" : [ 33.6 , - 96.6 ], "time" : 5 },
    { "coords" : [ 40.5 , - 96.3 ], "time" : 4 },
    { "coords" : [ 37.4 , - 66.6 ], "time" : 3 },
    { "coords" : [ 37.8 , - 97.6 ], "time" : 2 }
  ].map( function(d){ var newPoint = map.latLngToLayerPoint( d.coords ); d.coords = { 'x' : newPoint.x, 'y' : newPoint.y }; return d; } )

  g.selectAll("circle").data( data ).enter().append("circle")
    .attr("cx", function(d){ console.log(d); return d.coords.x } )
    .attr("cy", function(d){ return d.coords.y } )
    .attr("r", 5 )
    .style("fill", "teal")
}

这篇关于d3圆圈在传单地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！