d3を実装するClick to zoom

私はウェブの新作ですが、これは愚かな質問だと私は知っています...私はまだ間違っていて何をしているのか分かりません。ここのサイトのコード：http://bl.ocks.org/mbostock/2206590は、コピーしてhtml文書に貼り付けてus.jsonへのリンクを変更するだけで完全なファイルパスを指すように思えます。しかし、コードは単に空のページをプルアップするだけです。デモ上のページソースコードの検査（http://bl.ocks.org/mbostock/raw/2206590/）は、メインページで提供されているコードとまったく同じです。私はこれを実装するために何が欠けていますか？ありがとうございます！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>

出典

2016-11-13 Landon Tholen

-1

us.jsonファイルをダウンロードし、index.htmlと同じディレクトリにそれを置きます。その後us.jsonファイルへのパスを変更：これは私のために働いた

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

を。 Chromeを使用していて、リモートWebサーバーからではなくローカルコンピューターのindex.htmlファイルにアクセスする場合は、これを動作させるにはローカルWebサーバーを実行する必要があります。 Chromeでindex.htmlファイルを開こうとすると、Chromeのローカルファイルの制限により正しく表示されません。 Webサーバーからアクセスする必要があります。

これが役に立ちます。

出典

2016-11-13 05:30:22

なぜこれがダウン投票されたのか分かりません。あなたが何かをダウン投票することを選ぶならば、説明がうまくいくでしょう。 –

ああ、問題を引き起こしているChromeファイルの制限である必要があります。私はそれを考慮していなかった、ありがとう！私はあなたのためにupvoteを入れたが、私の担当者はまだ15歳未満である。私は私の代理人を得ると再びそれを試してみる –

問題はない。誰かが実際に誰かを助ける答えを下降させるのは驚くべきことです。私はあなたの質問を0に戻した。答えを受け入れてくれてありがとう！ –

答えて

関連する問題