5

スキル間の前提条件となる関係をマッピングするために、ルート化された n-ary ツリーを動的に描画する必要がある、私が開発している webapp があります。実際にはすでにこれを行っており、ここで例を見ることができます。私はそれを改善しようとしていますが、ここで PyMag に配置されたアルゴリズムを使用していますが、JavaScript コードに適応させる方法を見つけようとして少し迷っていることを認めなければなりません。

編集:これは、Rails ERB パーシャルからこれらのツリーを描画するための現在のコードです (ここにコードを貼り付けますが、少し長いです)。

私のコードをチェックアウトする人のためにgon.skills_map、この形式の配列です：

  • gon.skills_map[0] は、文字列内のスキルのタイトルです
  • gon.skills_map[1] はスキルの URL であるため、各ノードはクリック可能です。
  • gon.skills_map[2] は、これとまったく同じ形式の事後条件 (前提条件の反対を呼んでいるものです) 配列の配列です。
  • gon.skills_map[3]は前提関係の評価です(線の太さに影響します)
4

1 に答える 1

3

d3.js データ視覚化ライブラリを使用できます。特にグラフがより複雑になる場合は、ツリーを手動で構築するよりもはるかに優れたオプションです。d3 は svg を使用するため、クリック、ホバー、ドラッグなどの豊富な操作をグラフで行うことができます。

次のように、グラフを適切なデータ構造に変換する必要があります。

{
  title: 'Skill A',
  url: 'http://skilla.com',
  children: [
    {
      title: 'Skill B',
      url: 'http://skillb.com',
      rating: 3,
      children: [
        {
          title: 'Skill D',
          url: 'http://skilld.com',
          rating: 5
        }, 
        {
          title: 'Skill E',
          url: 'http://skilld.com',
          rating: 10
        }
      ]
    },
    {
      title: 'Skill C',
      url: 'http://skillc.com',
      rating: 1
    }
  ]
}

ここで、評価は親スキルへの依存度を示しています。このフィドルでd3を使用してサンプルスキルツリーを作成しましたhttp://jsfiddle.net/atrniv/y8drq/2/

さらに、d3 を選択できる場合は、スキル依存関係の同じデータセットから複数の異なる視覚化を作成できます。

d3 ウェブサイト - http://d3js.org/

于 2013-02-02T16:22:09.673 に答える