D3 Grafik (mit links) über google maps
Ich versuche mich zu ändern diese Beispiel, indem die verbindungen zwischen den Knoten (Verwandte).
<!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>
Und die JSON-Datei:
{"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: Jetzt kann ich den Zugriff auf die Koordinaten durch ein array.
Ich bin immer noch ein problem: das zeigen die links (SVGs).
<!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>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Habe es irgendwie funktioniert endlich.
Hatte ich zu zählen jQuery für das entfernen der alten svg:line-Elemente Neuzeichnen.
Hinzugefügt .links Klasse:
Erstellen der Google-Karte...
Zeichnen Sie jede Markierung als separate SVG-element.
Wir könnten eine einzige SVG, aber wie groß wäre es?
Den link transformieren-Funktion (Dank seine Frage).
Hinzugefügt ein array in der transformieren-Funktion, um die Knoten-Koordinaten.
Versuchte ich Ihre Antwort, aber es funktionierte nicht wirklich. Nach ein paar Stunden Schwitzen, habe ich es geschafft, es zu tun "richtig" (für mich zumindest). Vielen Dank für den code, ohne ihn würde ich immer noch versuchen.
Ich es hochgeladen http://jsfiddle.net/nom7eLha/ . Ich weiß nicht viel von d3 (es sieht aus wie Magie, um mich, tbh), so erwarten newbie-Fehler.
Den geladenen json folgt dem gleichen format aus dem OP.