3

protovis や d3js などの最新の JavaScript ライブラリで実現できるすべての優れた機能に深く感銘を受けました。生態学者として、私はこれらの高度な視覚化技術に最適なデータをたくさん持っています。悲しいことに、d3js ライブラリをダウンロードした後、私はすでに迷っています。:(

サンプルを実行するには、ローカルホストをセットアップする必要があることをhttp://d3js.orgで読みました。Windows 7 システムに xampp システムがインストールされています。Localhost/xampp は、すべて問題ないことを示していますが、それでもほとんどの例を実行できません。たとえば、「albers」は灰色のボックスのみを表示します。例の「バー」は正常に実行されます (私はそう思います)。

Windows 7 で正しく開始する方法を誰かに教えてもらえますか? チュートリアルへのリンクは大歓迎です。正しい方法が見つかれば、世界向けの独自のチュートリアルを作成します。

私の質問はまったくの初心者の質問なので、退屈で不快に聞こえることは承知しています。申し訳ありませんが、d3js を使用したいと思っています。なぜなら、私にはたくさんの良い (?) アイデアがあるからです。

ありがとう！

4

2 に答える 2

9

d3.jsはクライアント側のJavaScriptライブラリであるため、バックグラウンドでサーバーは必要ありません。静的ファイルの使用を開始します。簡単な例を次に示します。

index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first d3.js</title>
    <link href="style.css" rel="stylesheet">
  </head>

  <body>
    <div id="mySVG"></div>
    <script src="http://d3js.org/d3.v2.js"></script>
    <script>
      var svg = d3.select("#mySVG")
        .append("svg")
        .attr("width", 200)
        .attr("height", 200)

      svg.append("text")
        .attr("x", 50)
        .attr("y", 50)
        .attr("class", "text")
        .text("d3.js is awesome")
    </script>
  </body>

およびスタイリング用のstyle.css：

.text {
  fill: blue;
}

ブラウザで開くindex.htmlと、「d3.jsは素晴らしい」という青いテキストが表示されます。さらに役立つチュートリアルは次のとおりです。

そしてもちろん

于 2012-10-03T13:20:31.500 に答える
5

d3 サンプル ライブラリの一部の例では、静的ファイルをローカルで実行しようとすると、特定のブラウザーでエラーが発生する場合があります。Mike は、サンプルをブラウズする際に python の simplehttpserver を実行することを提案しています。

こちらの手順を参照してください: https://github.com/mbostock/d3/wiki

python -m SimpleHTTPServer 8888
于 2012-10-04T06:38:22.357 に答える