1

データベースから取得したオブジェクトの配列を使用しています。本質的にcsvファイル。サンプル オブジェクトは次のようになります。

var data = [
 {
  "name" : "blah",
  "number" : 1234,
  "associate" : 2234
 },
 {
  "name" : "blurg",
  "number" : 2234,
  "associate" : null
 },
 {
  "name" : "blarg",
  "number" : 3334,
  "associate" : null
 } 
]

私がやりたいのは、「関連」を持つオブジェクトとその適切な「親」の間に線またはパスを描くことですが、それは親/子として構造化されていません。

概念的には、これは私が考えていることです：

var diagonal = d3.svg.diagonal()
 .source(this)
 .target(dom_element_whose_number == d.associate);    

var filteredData = data.filter(function(d) { return d.associate };

svg.selectAll("path")
  .data(filteredData)
  .enter()
  .append("path")
  .attr("d", diagonal);

助言がありますか？私はしばらくこれに頭を悩ませてきました...

4

2 に答える 2

0

必要なのは一般的なグラフ（ツリー構造ではない）を描くことだと思いますが、ノードとエッジをレイアウトして完全に混乱しないようにする方法がわかりません。

いくつかのグラフ レイアウト アルゴリズムがあります。基本的な考え方は、ノードを (物理学のように) 互いに反発するオブジェクトとして扱い、グラフが可能な限り拡張されるようにすることです。

私はこのSOの質問が関連していることを発見しました： Graph auto-layout algorithm

さらに深く掘り下げたい場合は、この件に関するいくつかの研究論文があります: https://graphics.stanford.edu/wikis/cs448b-12-fall/Graph_Layout_and_Network_Analysis

お役に立てれば！

于 2013-07-17T05:01:34.430 に答える