5

私はD3.jsが初めてです。Mike Dewarの Getting Started with D3 を読んでいます。本の最初の例を試しましたが、うまくいきません。私はこれについて耳を傾けてきました。ここで私のコードの何が問題になっていますか?

<head>セクションでは：

<script src="http://mbostock.github.com/d3/d3.js"></script>
<script>
   function draw(data) {
    "use strict";
   d3.select("body")
      .append("ul")
      .selectAll("li")
      .data(data)
      .enter()
      .append("li")
         .text(function (d) {
            return d.name + ": " + d.status;
         });
      }
</script>

で<body>：

<script>

    d3.json("flare.json", draw);

</script>

そしてJSONファイル：

[
{
    "status": ["GOOD SERVICE"],
    "name": ["123"],
    "url": [null],
    "text": ["..."],
    "plannedworkheadline": [null],
    "Time": [" 7:35AM"],
    "Date": ["12/15/2011"]
}
]
4

4 に答える 4

5

Chrome を使用している場合、クロス ドメイン セキュリティの制限により、ファイルを正しく開けない場合があります。その場合は Firefox を試してみてください (ファイルを正しくロードできる可能性があります)。

それが問題である場合は、WAMP などのローカル Web サーバーをインストールするか (Windows を実行している場合)、次の wiki ページの指示に従ってください: https://github.com/mbostock/d3/wiki

幸運を

于 2013-02-06T16:58:55.903 に答える
1

ブラウザ コンソールをチェックして、XHR リクエストが成功したかどうかを確認しましたか?

VS 2012 Express で d3 (v3) のローカル バージョンを使用して自分のマシンでコードを実行しようとすると、XHR 要求に次のエラー メッセージが表示されます。

HTTP エラー 404.3 - 見つかりません

ただし、ここでほのめかされているように、「フレア」ファイルの拡張子を.jsonから.txtまたは.jsに変更すると: https://serverfault.com/questions/39989/iis-cant-serve-certain-file- extensionの場合、XHR リクエストは成功します。

于 2013-02-06T05:44:40.210 に答える
0

d.name と d.status はどちらも配列であり、それらの内容を表示したい場合は単なる文字列にする必要があります。または、これらの配列の 0 インデックス値にアクセスする必要があります。つまり、d.name[0] + ':' + d.status[0];

于 2013-02-07T16:07:44.873 に答える
0

それはあなたのJSONかもしれません。私も同じ練習をしましたが、うまくいきました。これが私のjsです（ボディではなくdivに追加しました）。ローカル Web サーバーを実行しています。

d3.json("data/mta001.json", drawli);

function drawli(data) {
    "use strict";
    d3.select('#mta001')
      .append('ul')
      .selectAll('ul')
      .data(data)
      .enter()
      .append('li')
        .text(function (d) {
            return d.name + ': ' + d.status;
      });
    d3.selectAll('#mta001 li')
      .style('color', function (d) {
        if ( d.status == 'GOOD SERVICE') {
            return 'green';
        } else {
            return 'fuchsia';
        }
      });
}

ここに私のJSONがあります：

[
        {
          "name": "123",
          "status": "DELAYS",
          "text": "delay text",
          "Date": "12/08/2012",
          "Time": " 1:03PM"
        }
]
于 2013-02-13T23:18:28.200 に答える