13

かなり複雑なタイプのデータを視覚化する必要があるプロジェクトに取り組んでいます (この古い質問を参照してください)。つまり、JSON、CSV、またはその他の任意のフラット形式にエクスポートできる大量のデータがありますが、可能であれば XML は避けたいと思います (基になるデータの詳細な説明については、上記のリンクされた質問を参照してください)。

私は D3 を使用してビジュアライゼーションの作業を開始しました。私が書いたレイアウトは、Javascript で配列としてハードコーディングした非常に単純なデータでテストすると、これまでのところ問題なく動作しているようです。D3 でのデータ バインディングについて私が読んだチュートリアルは、JSON を使用するものもあれば、TXT/CSV 形式を使用するものもあれば、ハードコードされた配列/行列を使用するものもあるという意味で、少し混乱しています。

JSONの場合、ナレーターがJSONファイルをWebサーバーでホストし、ローカルファイルの読み取りではなくHTTPリクエストを使用して取得することを強くアドバイスするチュートリアルを見ました. これは、クロス ドメイン リクエストの制限によるものであることがわかりました。何らかの方法で回避する必要があると思います。この時点で、次のように進める方法がわかりません。

  1. D3 を利用した視覚化は、私が作成した分析ツールの結果として作成される一連の HTML レポートに表示されます。分析はユーザーのコンピューターで行われ、HTML レポートもクライアント側でローカルに作成されます。

  2. 対象となるユーザーは、間違いなく技術に精通していないため、ローカルホストを介して JSON またはその他のタイプまたはリソースを提供できるように、コンピューターで Web サーバーを実行するように指示することはできません。

記録のために、python SimpleHTTPServer モジュールを実行して試してみましたが、すべて正常に動作します。次に、生成された HTML レポートのデータをハードコーディングしてから、D3 を使用するスクリプトから JSON オブジェクトを呼び出してみました。

//d3.json("mydata.json", function(json){
d3.json(myjson, function(json){
    nodeData = json.elements;
....
}

その場合、D3.jsがURLを期待している間にJSONオブジェクトを送信することになるため、失敗します。

この問題を回避/解決するにはどうすればよいですか?

4

6 に答える 6

2

サーバーを使用せずにデータ ローカル ファイルをロードするには、予期される変数またはオブジェクト要素に割り当てられたソース データを含むスクリプト タグを本文に追加します。以下の例では、[COUNTRY_ISO3CODE].js ファイルから特定の国のデータを読み込みます。具体的には、アフガニスタンのデータ ファイルには、次の形式のコンテンツが含まれる場合があります。

data[AFG] = {"name": "Afghanistan", "estimate": 9.003, ... }

呼び出しファイルには次のようなものがあります。

if (!data[iso3]) { //only load the needed data-script as needed

    // if using jQuery
    $('body').append("<script type='text/javascript' src='jdb/"+ iso3 +".js'></script>")

    //If not using jQuery
    /*var script   = document.createElement("script");
    script.type  = "text/javascript";
    script.src   = "jdb/"+iso3+".js"; //?_="+ (new Date()); URL might have to be randomized to avoid cached data
    document.body.appendChild(script);
    */

    // call the data-handling function only after 
    // the desired data has fully loaded
    // in this case, I check every 100 milliseconds
    var intervalId = setInterval( function () {
        if (data[iso3]) {    //once data is detected, process data
            clearInterval(intervalId); //stop checking for data
            prepData(mainWrapper, iso3)
            drawCharts(mainWrapper, iso3)
        }
    }, 100)
}
else drawCharts(mainWrapper, iso3)
于 2012-07-24T04:41:16.620 に答える
2

したがって、FileReader 呼び出しを介してローカル データをロードする必要があるため、以下はReading local files in JavaScriptから取得したものです。ただし、上記の例に基づいて作成されたこのコードは、ファイルをリンクせずに画像ファイルを svg に読み込みますが、実際にはラスター データを svg に挿入します。そして、ラスターデータを他のデータに自由に置き換えてください。正しい処理を追加するだけです...

最初に、セクション内のサポートする html 要素から<body>:

<input type="file" id="files" name="files[]" multiple />

次に、要素をセクション<input ... />内のコードにリンクします。<script>

document.getElementById('files').addEventListener('change', handleFileSelect, false);

これで、ファイルの背後にあるコードがイベント処理コードで読み取られました (この場合、ローカル イメージを D3JS svg にロードしたいと考えています)。

function handleFileSelect(evt) {
    reader = new FileReader();
    reader.onabort = function(e) {alert('File read cancelled');};
    var imageObj = new Image();  //image object to hold the local file contents.

    //and given the asynchronous nature, set up the event so that when the image is loaded, do something with it:
    imageObj.onload = function() {image.datum(imageObj.src).attr("xlink:href", function(d) {return d})};

    //similarly for the file reading:
    reader.onload = function(e) {imageObj.src = reader.result};

    //With all the events set up, lets start reading the file in.
    //the secret sauce is the DataURL
    reader.readAsDataURL(evt.target.files[0]);
}

完全を期すために、画像の背後にある D3JS ソース:

var svg = d3.select("body").append("svg");

var image = svg.append("defs")
    .append("pattern")
    .attr("id", "venus")
    .attr('patternUnits', 'userSpaceOnUse')
    .attr("width", 200)
    .attr("height", 200)
    .append("image")
    .attr("width", 200)
    .attr("height", 200);

var image2 = svg.append("rect")
    .attr("x", "0")
    .attr("y", "0")
    .attr("width", 200)
    .attr("height", 200)
    .attr("fill", "url(#venus)");
于 2015-09-16T11:55:55.170 に答える
1

毎回 HTML を生成している場合は、データを JSON として HTML に直接配置するか、おそらく生成された一意の URL を介して HTML から参照できる .js ファイルに配置できます。

于 2012-07-11T02:06:08.270 に答える
0

d3.json は、ajax 呼び出しを介して外部の json ファイルを読み込みmyjsonます。例の変数は既に JavaScript オブジェクトであるため、読み込む必要はありませんnodeData。割り当てで直接使用するだけです。

nodeData = myjson.elements;
于 2013-03-15T16:21:07.350 に答える