我正在尝试根据将D3与Google地图集成的演示修改此question中提到的代码。
基本上，我想要的是在给定的2点之间在地图上画一条线。该线也将根据地图中的更改进行更新。
到目前为止，通过上面的代码 - 我能够看到svg元素在那里，但无法看到该行。此外，我想我可能会错过转换为像素。
<svg width="100%" style="position: absolute;"><path d="M8067.524444444445,48446.32912634293L8022.013333333334,48446.32912634293" stroke="red" class="line aaa"></path></svg>
以下是代码：
<html>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.stations {
position: absolute;
}
.stations, .stations svg.aaa {
position: absolute;
}
.stations border {
position: absolute;
stroke: black;
stroke-width: 2px;
}
.stations svg.aaa {
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 map
var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 6,
center: new google.maps.LatLng(37.76487, -122.41948),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var data = [
{ name: 'pt1', lng: -122.28, lat: 38.2 },
{ name: 'pt2', lng: -122.05, lat: 38.0 },
{ name: 'pt3', lng: -122.12, lat: 37.67 },
{ name: 'pt4', lng: -121.82, lat: 37.7 },
{ name: 'pt5', lng: -121.95, lat: 38.38 },
{ name: 'pt6', lng: -121.78, lat: 36.93 },
{ name: 'pt7', lng: -122.25, lat: 37.52 },
{ name: 'pt8', lng: -122.82, lat: 38.5 },
{ name: 'pt9', lng: -121.92, lat: 37.37 },
{ name: 'pt10', lng: -122.37, lat: 37.62 },
{ name: 'pt11', lng: -121.23, lat: 37.9 },
];
var line = [[[-122.28, 38.2], [-121.28, 37.2]]]
// Load the station data. When the data comes back, create an overlay.
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")
.attr("id", "layer");
layer[0][0].style.width = "1366px";
layer[0][0].parentNode.style.width = "100%";
layer[0][0].parentNode.style.height = "100%";
layer[0][0].parentNode.parentNode.style.width = "100%";
layer[0][0].parentNode.parentNode.style.height = "100%";
layer[0][0].parentNode.parentNode.parentNode.style.width = "100%";
layer[0][0].parentNode.parentNode.parentNode.style.height = "100%";
layer[0][0].parentNode.parentNode.parentNode.parentNode.style.width = "100%";
layer[0][0].parentNode.parentNode.parentNode.parentNode.style.height = "100%";
// 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 marker = layer.selectAll("svg")
.data( data )
.each(transform) // update existing markers
.enter().append("svg:svg")
.each(transform)
.attr("class", "marker aaa")
marker.append("svg:circle")
.attr("r", 4.5)
.attr("cx", padding )
.attr("cy", padding );
// add a label.
marker.append("svg:text")
.attr("x", padding + 7)
.attr("y", padding)
.attr("dy", ".31em")
.text( function(d) {
return d.name; }
);
var v = d3.geom.voronoi( translate(data) );
console.log( "v is :" );
console.log( v );
var lineEdges = layer.selectAll("path")
.data(line)
.attr("d",translate_edge)
.enter()
.append("svg:svg").attr("width", "100%").attr("width","100%").style("position", "absolute")
.append("svg:path")
.attr("d",translate_edge)
.attr("stroke", "red")
.attr("class", "line aaa")
function translate_edge(d)
{
var c1 = _projection( d[0][0], d[0][1] )
var c2 = _projection( d[1][0], d[1][1] )
console.log( 'PATH: ' + c1)
console.log( 'M'+ c1[0] +','+ c1[1]+ 'L' + c2[0] +','+ c2[1])
var p = 'M'+ c1[0] +','+ c1[1]+ 'L' + c2[0] +','+ c2[1]
return p;
}
function translate(data) {
var d = []
for( var i=0; i<data.length; i++){
var c = [ data[i].lat, data[i].lng ]
d.push( c )
}
return d
}
function _projection( lat, lng ) {
e = new google.maps.LatLng( lat, lng );
e = projection.fromLatLngToDivPixel(e);
return [ e.x - padding, e.y - padding]
// return [ e.x, e.y ]
}
function transform(d) {
e = _projection( d.lat, d.lng )
console.log("marker " + d.lat +', ' + d.lng + " -> left: " + e[0] +", top: " + e[1] )
return d3.select(this)
.style("left", e[0] + "px")
.style("top", e[1] + "px");
}
function transform_path(data) {
var d = []
console.log(data)
for( var i=0; i<data.length; i++) {
var c = _projection( data[i][0], data[i][1] )
console.log( ' path point: ' + JSON.stringify(data[i]) + ' -> left: ' + c[0] + ", top: " + c[1])
d.push( c )
}
// console.log(d)
return d
}
};
};
// Bind our overlay to the map…
overlay.setMap(map);
</script>
任何想法都表示赞赏。提前谢谢！