d3jsツリーレイアウトのルートノードにクラスを追加する

Sooraj

私はd3jsツリーのレイアウトで遊んでいます。私はこのに従っていました

各ノードにクラス属性を追加しようとしていました。1つのクラスをルートノードに追加し、別のクラスを子ノードに追加するにはどうすればよいですか。

var treeData = [{
  "name": "Top Level",
  "parent": "null",
  "children": [{
    "name": "Level 2: A",
    "parent": "Top Level",
    "children": [{
      "name": "Son of A",
      "parent": "Level 2: A"
    }, {
      "name": "Daughter of A",
      "parent": "Level 2: A"
    }]
  }, {
    "name": "Level 2: B",
    "parent": "Top Level"
  }]
}];


// ************** Generate the tree diagram	 *****************
var margin = {
    top: 20,
    right: 120,
    bottom: 20,
    left: 120
  },
  width = 960 - margin.right - margin.left,
  height = 500 - margin.top - margin.bottom;

var i = 0,
  duration = 750,
  root;

var tree = d3.layout.tree()
  .size([height, width]);

var diagonal = d3.svg.diagonal()
  .projection(function(d) {
    return [d.y, d.x];
  });

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.right + margin.left)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;

update(root);

d3.select(self.frameElement).style("height", "500px");

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
    links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) {
    d.y = d.depth * 180;
  });

  // Update the nodes…
  var node = svg.selectAll("g.node")
    .data(nodes, function(d) {
      return d.id || (d.id = ++i);
    });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) {
      return "translate(" + source.y0 + "," + source.x0 + ")";
    })
    .on("click", click);

  nodeEnter.append("circle")
    .attr("r", 1e-6)
    .style("fill", function(d) {
      return d._children ? "lightsteelblue" : "#fff";
    })
    .attr("class","node"); // adding class here - common for everything

  nodeEnter.append("text")
    .attr("x", function(d) {
      return d.children || d._children ? -13 : 13;
    })
    .attr("dy", ".35em")
    .attr("text-anchor", function(d) {
      return d.children || d._children ? "end" : "start";
    })
    .text(function(d) {
      return d.name;
    })
    .style("fill-opacity", 1e-6);

  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + d.y + "," + d.x + ")";
    });

  nodeUpdate.select("circle")
    .attr("r", 10)
    .style("fill", function(d) {
      return d._children ? "lightsteelblue" : "#fff";
    });

  nodeUpdate.select("text")
    .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
  var nodeExit = node.exit().transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + source.y + "," + source.x + ")";
    })
    .remove();

  nodeExit.select("circle")
    .attr("r", 1e-6);

  nodeExit.select("text")
    .style("fill-opacity", 1e-6);

  // Update the links…
  var link = svg.selectAll("path.link")
    .data(links, function(d) {
      return d.target.id;
    });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
    .attr("class", "link")
    .attr("d", function(d) {
      var o = {
        x: source.x0,
        y: source.y0
      };
      return diagonal({
        source: o,
        target: o
      });
    });

  // Transition links to their new position.
  link.transition()
    .duration(duration)
    .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
    .duration(duration)
    .attr("d", function(d) {
      var o = {
        x: source.x,
        y: source.y
      };
      return diagonal({
        source: o,
        target: o
      });
    })
    .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}
.node {
  cursor: pointer;
}
.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}
.node text {
  font: 12px sans-serif;
}
.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

シリル・チェリアン

あなたはこのようにそれを行うことができます:

var nodeEnter = node.enter().append("g")
    .attr("class", function(d){
      if (d.parent == "null"){
        return "node parent"//since its root its parent is null
      } else
        return "node child"//all nodes with parent will have this class
    })
    .attr("transform", function(d) {
      return "translate(" + source.y0 + "," + source.x0 + ")";
    })
    .on("click", click);

ここでの作業コード

お役に立てれば

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

d3jsでツリーレイアウトの特定のノードをクリックできないようにする方法

分類Dev

d3jsの強制レイアウトで特定のノードのスタイルを更新する

分類Dev

ツリーレイアウトのd3jsの座標を更新する

分類Dev

d3jsのツリーレイアウトの子ノードから子ノードにのみ破線のリンクを描画することは可能ですか?

分類Dev

Forceレイアウトのd3ノードにテキストラベルを追加します

分類Dev

D3jsはレイアウト更新ノードとリンクを強制します

分類Dev

Hobbeltの「グループ/バンドルノード」D3強制レイアウトの例でノードにラベルを追加しますか?

分類Dev

d3ツリーレイアウトリンクにマーカーを追加する

分類Dev

D3jsツリーのJsonオブジェクトの子の下でリーフノードを子に変換する

分類Dev

d3力レイアウトグラフのノード上にテキストを表示する

分類Dev

D3ツリーレイアウトにタイトルを追加するとエラーが発生します(D3)

分類Dev

vb 6.0のツリービューコントロールにドライブを追加する方法(ウィンドウエクスプローラーなど)

分類Dev

ノードをアルファベット順にソートするためにd3.jsツリーレイアウトを取得するにはどうすればよいですか?

分類Dev

d3.js強制ノードキャンバスレイアウトでノードグループの色を変更する

分類Dev

D3.jsの力レイアウトグラフでメインノードに衛星ノードを作成する方法

分類Dev

ノードではなくツリー内のブランチを移動するD3強制レイアウト

分類Dev

ファイアウォールルールに複数のリモートアドレスを追加するPowershellスクリプト

分類Dev

D3強制レイアウトノードラベルに改行を挿入する

分類Dev

d3jsバージョン4でノードとリンクをシミュレーションフォースにアタッチする方法は?

分類Dev

ノードの動的な追加を処理するレイアウト(cytoscape.js)

分類Dev

動的に追加されたエッジにラベルを追加するd3jsの強制レイアウト

分類Dev

d3.jsのツリーグラフのノード内にテキストを表示します

分類Dev

D3力レイアウトグラフのノードとして画像を追加するにはどうすればよいですか?

分類Dev

D3フォースレイアウト-ノードの3D外観を実現する方法は?

分類Dev

ノックアウトは、レコードマッピングプラグインのリストに新しい行を追加します

分類Dev

d3力指向レイアウトノードにツールチップを表示するにはどうすればよいですか?

分類Dev

Ubuntuにノードjsパルサークライアントをインストールする

分類Dev

pyqt4のグリッドレイアウトにスクロールバーを追加します

分類Dev

pyqt4のグリッドレイアウトにスクロールバーを追加します

Related 関連記事

  1. 1

    d3jsでツリーレイアウトの特定のノードをクリックできないようにする方法

  2. 2

    d3jsの強制レイアウトで特定のノードのスタイルを更新する

  3. 3

    ツリーレイアウトのd3jsの座標を更新する

  4. 4

    d3jsのツリーレイアウトの子ノードから子ノードにのみ破線のリンクを描画することは可能ですか?

  5. 5

    Forceレイアウトのd3ノードにテキストラベルを追加します

  6. 6

    D3jsはレイアウト更新ノードとリンクを強制します

  7. 7

    Hobbeltの「グループ/バンドルノード」D3強制レイアウトの例でノードにラベルを追加しますか?

  8. 8

    d3ツリーレイアウトリンクにマーカーを追加する

  9. 9

    D3jsツリーのJsonオブジェクトの子の下でリーフノードを子に変換する

  10. 10

    d3力レイアウトグラフのノード上にテキストを表示する

  11. 11

    D3ツリーレイアウトにタイトルを追加するとエラーが発生します(D3)

  12. 12

    vb 6.0のツリービューコントロールにドライブを追加する方法(ウィンドウエクスプローラーなど)

  13. 13

    ノードをアルファベット順にソートするためにd3.jsツリーレイアウトを取得するにはどうすればよいですか?

  14. 14

    d3.js強制ノードキャンバスレイアウトでノードグループの色を変更する

  15. 15

    D3.jsの力レイアウトグラフでメインノードに衛星ノードを作成する方法

  16. 16

    ノードではなくツリー内のブランチを移動するD3強制レイアウト

  17. 17

    ファイアウォールルールに複数のリモートアドレスを追加するPowershellスクリプト

  18. 18

    D3強制レイアウトノードラベルに改行を挿入する

  19. 19

    d3jsバージョン4でノードとリンクをシミュレーションフォースにアタッチする方法は?

  20. 20

    ノードの動的な追加を処理するレイアウト(cytoscape.js)

  21. 21

    動的に追加されたエッジにラベルを追加するd3jsの強制レイアウト

  22. 22

    d3.jsのツリーグラフのノード内にテキストを表示します

  23. 23

    D3力レイアウトグラフのノードとして画像を追加するにはどうすればよいですか?

  24. 24

    D3フォースレイアウト-ノードの3D外観を実現する方法は?

  25. 25

    ノックアウトは、レコードマッピングプラグインのリストに新しい行を追加します

  26. 26

    d3力指向レイアウトノードにツールチップを表示するにはどうすればよいですか?

  27. 27

    Ubuntuにノードjsパルサークライアントをインストールする

  28. 28

    pyqt4のグリッドレイアウトにスクロールバーを追加します

  29. 29

    pyqt4のグリッドレイアウトにスクロールバーを追加します

ホットタグ

アーカイブ