實現d3點擊放大

我是新來的網絡的東西，但即使我知道這是一個愚蠢的問題......我仍然無法弄清楚我做錯了什麼。網站上的代碼如下：http://bl.ocks.org/mbostock/2206590好像您可以將其複製並粘貼到一個html文檔中，並且只修改指向us.json的鏈接，以便它指向完整的文件路徑。但是，代碼只是拉起了一個空白頁面。檢查演示頁面源代碼（http://bl.ocks.org/mbostock/raw/2206590/）與主頁上提供的代碼完全相同。我錯過了什麼來實現這個？謝謝！實現d3點擊放大

<!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>

來源

2016-11-13 Landon Tholen

-1

下載us.json文件，並把它放在同一目錄下index.html。然後路徑更改爲us.json文件：

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

這爲我工作。如果您使用的是Chrome並在本地計算機上訪問index.html文件，而不是從遠程網絡服務器訪問，則需要運行本地網絡服務器才能運行。如果您只是嘗試在Chrome中打開index.html文件，由於Chrome的本地文件限制，它將無法正常顯示。它需要通過網絡服務器訪問。

希望這會有所幫助。

來源

2016-11-13 05:30:22

不知道爲什麼這是倒票。如果你選擇對某件事進行倒票，那麼解釋會很好。 –

嗯，它必須是導致我出現問題的Chrome文件限制。我沒有考慮過，謝謝！我爲你放了一個贊成票，但是我的代表仍然低於15分。我會再次嘗試它，一旦我得到我的代表 –

沒問題。令人驚訝的是，有人會倒下一個真正幫助別人的答案。我把你的問題回覆爲零。感謝您接受答案！ –

實現d3點擊放大

回答

相關問題