1

私は書籍間の参照を視覚化するプロジェクトに取り組んでいます。私はJavascriptの初心者です。そのため、D3.js API リファレンスを読んでもあまり理解できませんでした。このコード例を使用しました。これはうまく機能します。

私のCSVファイルの構造は次のようなものです：

source,target
"book 1","book 2"
"book 1","book 3"

等

ソースとターゲットはリンクで接続されています。レイアウトのポイントは次のとおりです。

  1. ソース ノードとターゲット ノードにそれぞれ 2 つの異なる円を作成します。

  2. ソース ノードとターゲット ノードに特定の色を設定します。

  3. 円は本の情報でラベル付けする必要があります。たとえば、ソース ノードは「book 1」でラベル付けされ、ターゲット ノードは「book 2」でラベル付けされます。

  4. ターゲット間にリンクがある場合は、この特定のリンクをソースからターゲットへの他のリンクよりも広くします。

これらのポイントを作成することで、あなたが私を助けてくれることを願っています.

前もって感謝します。

よろしくアイネイアス

4

1 に答える 1

1

d3.js は、csv ファイルよりも json データ ファイルの方がうまく機能するため、何らかの方法で csv データを json 形式に転送することをお勧めします。私は最近、これに似たものをコーディングしました。ノードとリンクを次のようにフォーマットされた辞書としてjsonファイルに保存しました。

{ 
'links': [{'source': 1, 'target': 2, 'value': 0.3}, {...}, ...],
'nodes': [{'name': 'something', 'size': 2}, {...}, ...]
}

これにより、ノードとリンクを次のように初期化できます (ビューを開始した後)。

d3.json("data/nodesandlinks.json", function(json) {
var force = self.force = d3.layout.force()
    .nodes(json.nodes)
    .links(json.links)
    .linkDistance(function(d) { return d.value; })
    .linkStrength(function(d) { return d.value; })
    .size([width, height])
    .start();

var link = vis.selectAll("line.link")
    .data(json.links)
    .enter().append("svg:line")
    .attr("class", "link")
    .attr("source", function(d) { return d.source; })
    .attr("target", function(d) { return d.target; })
    .style("stroke-width", function(d) { return d.value; });

var node = vis.selectAll("g.node")
    .data(json.nodes)
    .enter().append("svg:g")
    .attr("class", "node")
    .attr("name", function(d) { return d.name; })
    .call(force.drag);

これが役に立ったことを願っています！

于 2012-07-10T22:48:20.457 に答える