Implement d3 Click-to-zoom

Ich bin neu im Web, aber selbst ich weiß, dass das eine dumme Frage ist ... Ich kann immer noch nicht herausfinden, was ich falsch mache. Der Code auf der Website hier: http://bl.ocks.org/mbostock/2206590 scheint, als ob Sie es kopieren und in ein HTML-Dokument einfügen könnten und nur den Link zu der us.json ändern, so dass es auf den vollständigen Dateipfad verweist. Der Code ruft jedoch nur eine leere Seite auf. Die Überprüfung des Seitenquellcodes auf der Demo (http://bl.ocks.org/mbostock/raw/2206590/) entspricht genau dem Code auf der Hauptseite. Was fehlt mir, um dies zu implementieren? Danke !!!Implement d3 Click-to-zoom

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 

 
.background { 
 
    fill: none; 
 
    pointer-events: all; 
 
} 
 

 
#states { 
 
    fill: #aaa; 
 
} 
 

 
#states .active { 
 
    fill: orange; 
 
} 
 

 
#state-borders { 
 
    fill: none; 
 
    stroke: #fff; 
 
    stroke-width: 1.5px; 
 
    stroke-linejoin: round; 
 
    stroke-linecap: round; 
 
    pointer-events: none; 
 
} 
 

 
</style> 
 
<body> 
 
<script src="//d3js.org/d3.v3.min.js"></script> 
 
<script src="//d3js.org/topojson.v1.min.js"></script> 
 
<script> 
 

 
var width = 960, 
 
    height = 500, 
 
    centered; 
 

 
var projection = d3.geo.albersUsa() 
 
    .scale(1070) 
 
    .translate([width/2, height/2]); 
 

 
var path = d3.geo.path() 
 
    .projection(projection); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height); 
 

 
svg.append("rect") 
 
    .attr("class", "background") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .on("click", clicked); 
 

 
var g = svg.append("g"); 
 

 
d3.json("/mbostock/raw/4090846/us.json", function(error, us) { 
 
    if (error) throw error; 
 

 
    g.append("g") 
 
     .attr("id", "states") 
 
    .selectAll("path") 
 
     .data(topojson.feature(us, us.objects.states).features) 
 
    .enter().append("path") 
 
     .attr("d", path) 
 
     .on("click", clicked); 
 

 
    g.append("path") 
 
     .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) 
 
     .attr("id", "state-borders") 
 
     .attr("d", path); 
 
}); 
 

 
function clicked(d) { 
 
    var x, y, k; 
 

 
    if (d && centered !== d) { 
 
    var centroid = path.centroid(d); 
 
    x = centroid[0]; 
 
    y = centroid[1]; 
 
    k = 4; 
 
    centered = d; 
 
    } else { 
 
    x = width/2; 
 
    y = height/2; 
 
    k = 1; 
 
    centered = null; 
 
    } 
 

 
    g.selectAll("path") 
 
     .classed("active", centered && function(d) { return d === centered; }); 
 

 
    g.transition() 
 
     .duration(750) 
 
     .attr("transform", "translate(" + width/2 + "," + height/2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")") 
 
     .style("stroke-width", 1.5/k + "px"); 
 
} 
 

 
</script>

Quelle

2016-11-13 Landon Tholen

-1

die us.json Datei herunterladen und im gleichen Verzeichnis wie die index.html setzen. Ändern Sie dann den Pfad zur Datei us.json:

d3.json("us.json", function(error, us) {

Das ist für mich gearbeitet. Wenn Sie Chrome verwenden und auf die Datei index.html auf Ihrem lokalen Computer und nicht von einem Remote-Webserver aus zugreifen, müssen Sie einen lokalen Webserver ausführen, damit dies funktioniert. Wenn Sie versuchen, die Datei index.html in Chrome zu öffnen, wird sie aufgrund der lokalen Dateieinschränkungen von Chrome nicht ordnungsgemäß angezeigt. Es muss über einen Webserver zugegriffen werden.

Hoffe, das hilft.

Quelle

2016-11-13 05:30:22

Nicht sicher, warum dies abgelehnt wurde. Wenn Sie etwas abstimmen, wäre eine Erklärung gut. –

Ah, es sind die Einschränkungen der Chrome-Datei, die mir Probleme bereiten. Das hatte ich nicht bedacht, danke! Ich habe eine Hochstufung für dich gemacht, aber mein Rep ist immer noch unter 15. Ich werde es noch einmal versuchen, wenn ich meinen Rep-up bekomme –

Kein Problem. Erstaunlich, dass jemand eine Antwort abwarf, die jemandem wirklich hilft. Ich habe Ihre Frage auf Null zurückgesetzt. Danke für die Annahme der Antwort! –

Implement d3 Click-to-zoom

Antwort

Verwandte Themen