3

そこで、D3.js を使用して階層ツリー図を作成しようとしています。QtWebView の上で動作するはずですが、これまでのところ、非常にうまく機能しています。次に、アプリのデータ処理ビットに取り組む必要があります。私のデータは CSV 形式で保存されており (私の選択ではありませんし、そのことについて意見もありません)、以下に説明します。

私の質問は:この CSV から JSON を出力する方法は?

私は数日間例を探していましたが、立ち往生しています。JSON形式のデータを使用してツリーを生成する方法の例と、プラグインを使用してQtでJSONを出力する方法について話している人しかいないので、誰かが私を正しい方向に向けることができるかどうか疑問に思いました.

CSV/JSONファイルの読み書きに問題はありません。このデータから JSON を出力できるようにするアルゴリズムを作成する方法を本当に知る必要があります。

これは私の CSV ファイルの例です (node_type と node_size は単なる表示用です)。

node_id,name,node_size,node_type,parent_node
1,ノード1,122,4,17
2,node2,127,4,20
3、ノード3、64、2、5
4,ノード4,147,5,14
5,node5,146,5,12
6,node6,57,4,10
7,node7,149,1,20
8、ノード8、141、6、10
9,node9,65,5,10
10、ノード10、108、2、10
11、ノード11、97、6、2
12、ノード12、102、2、5
13、ノード13、79、6、3
14、ノード14、90、2、2
15、ノード15、129、1、8
16、ノード16、76、1、8
17、ノード17、68、6、13
18、ノード18、53、5、7
19、ノード19、112、6、20
20、ノード20、147、5、6

編集: Pablo Navarro のヒントを試して、D3.js が処理する次のスクリプトを作成しました。エラーは発生していませんが、何も表示されません。誰かが理由を示唆できますか?

EDIT2: コードのタイプミスを修正しました。

    var width = 960, height = 500;
    var color = d3.scale.category20();
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);
    var nodesArray = [], edgesArray = [];

    d3.csv('nodes.csv', function(data) {
        for (var k = 0, n = data.length; k < n; k += 1) {
            nodesArray.push({name: data[k].name, size: data[k].node_size, id: data[k].node_id}),
            edgesArray.push({source: data[k].node_id, target: data[k].parent_node});       
        }
    });

    var force = d3.layout.force()
       .nodes(nodesArray)
       .links(edgesArray)
       .size([width, height])
        .start();

    var link = svg.selectAll(".link")
        .data(edgesArray)
        .enter().append("line")
        .attr("class", "link")
    var node = svg.selectAll(".node")
        .data(nodesArray)
        .enter().append("circle")
        .attr("class", "node")
        .attr("r", nodesArray.size)

EDIT3：すべての違いを生んでいると私が思う小さな詳細：私はこれをローカルで呼び出しています。ローカルとは、一種の「localhost」Webサーバーではなく、file . Jerome Crukierのチュートリアルで読んだものから：

これは、ローカル ファイル システムでは機能しなくなります (つまり、ブラウザでファイルを開く)。結果のファイルは、ローカルの Web サーバー上でのみ実行できます (つまり、ページに URL があります)。

これが私のコードに当てはまるかどうかはわかりませんが、もう一度、誰かが何か洞察を持っていれば、それは高く評価されます.

編集4：

わかりました、オンラインで検索した後、残念ながらGoogleとStackoverflowの使い方がわからないことを認めなければなりません.mbostock（D3.jsの）自身が説明したように、皮肉なことにここで知る必要があるすべてを見つけました. 自分が実際に何を探しているのかわからなかったのですが、どういうわけか見つけました。

この（まだ開いている）質問に関して、今何をすべきかよくわかりません。

4

1 に答える 1