2017-06-07 7 views
0

Mike Bostock’s Block 5649592を例としてストロークダッシュ補間を描画しようとしています。ストロークダッシュ補間サンプルコードが機能しない

コードをindex.htmlの例から自分のローカルコンピュータのhtmlファイルにコピーしましたが、htmlファイルを開いたときに何も表示されません。誰がここで何が起こっているのか知っていますか?ここに何もないのですか?

私はここで自分のコードをコピーしています:

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

path { 
    fill: none; 
    stroke: #000; 
    stroke-width: 3px; 
} 

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

var points = [ 
    [480, 200], 
    [580, 400], 
    [680, 100], 
    [780, 300], 
    [180, 300], 
    [280, 100], 
    [380, 400] 
]; 

var line = d3.svg.line() 
    .tension(0) // Catmull–Rom 
    .interpolate("cardinal-closed"); 

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

svg.append("path") 
    .style("stroke", "#ddd") 
    .style("stroke-dasharray", "4,4") 
    .attr("d", line); 

svg.append("path") 
    .attr("d", line) 
    .call(transition); 

function transition(path) { 
    path.transition() 
     .duration(7500) 
     .attrTween("stroke-dasharray", tweenDash) 
     .each("end", function() { d3.select(this).call(transition); }); 
} 

function tweenDash() { 
    var l = this.getTotalLength(), 
     i = d3.interpolateString("0," + l, l + "," + l); 
    return function(t) { return i(t); }; 
} 

</script> 

すべてのヘルプは歓迎です!ありがとう。

問題は、以下の私の答えの記事を参照してください

を解決しました。 BJKへの名誉!

+1

私はライブラリをダウンロードしていないと確信していますので、D3のオンラインリファレンスを提供してください: ''。 –

+1

@GerardoFurtado素敵ではありませんが、それは問題ではありません! [* "すべてのhttp://リンクを//?" *](/ q/4831741)とhttps://www.paulirish.com/2010/the-protocol-relative-url/に変更することができます。 – altocumulus

+0

@altocumulusはい、あなたが正しいです、私は私のコメントで不注意でした:私はコードをスキミングし、それは絶対パスだったが。 my(tyred)myndで '' /d3.v3.min.js」 'を読みました。 –

答えて

0

私はGoogle D3.jsグループから私を助けてくれたBJKのおかげで、私は問題を理解しました。私は開発環境では動作していませんでした。ローカルファイルシステムを使用していましたが、これは必ずしも機能しません。開発環境にスイッチした後、「... 『

』を参照してくださいhttps://github.com/d3/d3/wiki =>セクション」ローカルの開発を、マイク・ボストックは(FYI、私はBossTalkとして彼の名前を覚えて、:ここで

はBJKが送ってくれた提案です彼が上司のようなデータを話すことは真実です)のコードは完全に機能します。

乾杯。

関連する問題