42

下の図に示すように、長方形のノードが重なっているため、現在、長方形のノードを分離しようとしています。

ここに画像の説明を入力

調べてみると、D3 がnodeSizeと分離方法を提供していることがわかりましたが、何らかの理由で機能しませんでした。

問題について話しているこのブログ投稿を見つけましたが、彼は言います

size プロパティはノードには存在しないため、ノードのサイズを制御する任意のプロパティになります。

しかし、明らかに nodeSize メソッドがあるので、メソッドの使い方が間違っているか、ブログの投稿が古くなっているように感じます。ノードが長方形のサイズになるように形を整え、ノードが互いに重ならないように均等に配置したいと考えています。メソッドを適切に使用する方法を知っている人はいますか？これらのメソッドに関するドキュメントはあまり説明されておらず、違いはありません。また、人々が木のノードサイズを変更したり、長方形のオブジェクトを分離する必要がある例を見つけることができませんでした（円形のものについてはいくつかの例がありましたが、それはあまりにも異なっていると感じています...）

関連するコードは次のとおりです。JSFiddleを用意してみます。

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    height = 960 - margin.right - margin.left,
    width = 800 - margin.top - margin.bottom,
    rectW = 70;
    rectH = 30;
    //bbox = NaN,
    maxTextLength = 0;

var i = 0,
    duration = 750,
    root;


//paths from each node drawn initially here
//changed to d.x, d.y
var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.x+rectW/2, d.y+rectH/2];
    //.projection(function(d) { return [d.x+bbox.getBBox().width/2, d.y+bbox.getBBox().height/2]; 
});

var tree = d3.layout.tree()
    .nodeSize([30,70])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); })
    .size([width, height]);

var svg = d3.select("body")
            .append("svg")
              .attr("height","100%").attr("width","100%")
              .call(d3.behavior.zoom().on("zoom", redraw))
              .append("g")
                .attr("transform", "translate(" + margin.top + "," + margin.left + ")");
4

4 に答える 4

52

UPDATE 05/04/2018 : 私の理解では、d3 は (より良い方向に) 大幅に変更され、よりモジュール化されています。この回答を探している人にとっては、これははるかに古いバージョンの d3 (特に v3) を使用していました。

多くの調査結果は、d3-hierarchy下のパッケージにまだ関連してcluster.size()おりcluster.nodeSize()、それを使用するために例を更新する可能性があります。ただし、歴史的な参照のために、下部はそのままにしておきます。

ここに jsFiddle があります: http://jsfiddle.net/augburto/YMa2y/

編集: 例を更新して Codepen に移動しました。この例はまだ jsFiddle にありますが、Codepen の方が優れたエディターを備えているようで、簡単にフォークできます。また、コンテンツの量を減らしたら、この回答に例を直接追加しようとします。

http://codepen.io/augbog/pen/LEXZKK

この回答を更新します。私は友人と話し、ソースを調べましsizeたnodeSize

  tree.size = function(x) {
    if (!arguments.length) return nodeSize ? null : size;
    nodeSize = (size = x) == null;
    return tree;
  };

  tree.nodeSize = function(x) {
    if (!arguments.length) return nodeSize ? size : null;
    nodeSize = (size = x) != null;
    return tree;
  };

ツリーに を設定sizeすると、固定サイズが設定されるため、ツリーはその幅と高さに適合する必要があります。を設定するnodeSizeと、ツリーは動的でなければならないため、ツリーのサイズがリセットされます。

sizeafterを指定したときnodeSize、私は欲しいものをほとんどオーバーライドしていました...

結論: 作業したい場合nodeSizeは、ツリーのサイズを固定することはできません。サイズを に設定しnullます。sizea を宣言している場合は、a を宣言しないでくださいnodeSize。

編集: D3.js は実際にドキュメントを更新しました。それが今ではずっと明確になっているので、それをしてくれた人に感謝します!

nodeSize プロパティは、tree.size と排他的です。tree.nodeSize を設定すると、tree.size が null に設定されます。

これが私のツリーの現在の姿です。また、ズーム機能と、テキストを四角形の中央に配置する方法も追加しました。

nodeSize を幅 100、高さ 30 に設定した図

于 2013-07-11T22:34:56.880 に答える
-2

D3 はObservableを通じて処理を行うようになりました。

nodeSizeを設定するには、次の 行を探します。

main.variable(observer("tree")).define("tree", ["d3","dx","dy"],
function(d3,dx,dy){return(
d3.tree()

そして、定数を追加して nodeSize を設定します。

main.variable(observer("tree")).define("tree", ["d3","dx","dy"],
function(d3,dx,dy){return(
d3.tree().nodeSize([dx + 10, dy + 10])

または、関数を使用して、古い D3 アプローチを使用した他の回答で説明されているように、チャート サイズの値を設定します。

于 2019-07-31T18:08:07.107 に答える