[javascript] NodeSize를 사용하는 노드 간 D3 트리 레이아웃 분리



0 Answers

나는 내 자신을 파고 할 때까지 받아 들여진 대답을 이해하지 못했고, 그래서 나는 내가 발견 한 것을 나눌 것이라고 생각했다.

.size() 하고 노드가 겹치면 대신 .nodeSize() 사용하십시오.

허용 된 대답에서 설명한 것처럼 .size() 는 트리의 사용 가능한 크기를 설정하므로 사촌 노드와 두 번째 사촌 간의 간격에 따라 서로 겹쳐서 겹칠 수 있습니다. .nodeSize() 를 사용하면 단순히 각 노드가이 많은 공간을 확보해야하므로 중복되지 않을 것이라고 말합니다!

결국 나를 위해 일한 코드는

var nodeWidth = 300;
var nodeHeight = 75;
var horizontalSeparationBetweenNodes = 16;
var verticalSeparationBetweenNodes = 128;

var tree = d3.layout.tree()
    .nodeSize([nodeWidth + horizontalSeparationBetweenNodes, nodeHeight + verticalSeparationBetweenNodes])
    .separation(function(a, b) {
        return a.parent == b.parent ? 1 : 1.25;
    });

horizontalSeparationBetweenNodes 노드와 verticalSeparationBetweenNodes 노드 사이에 노드 가장자리가 서로 닿았습니다. 나는 또한 .separation() 을 추가하여 사촌 노드 사이의 공간을 줄였다. 노드가 꽤 넓고 많은 공간이 낭비되었다.

참고 : 이것은 v3가 아닌 d3 v3 용입니다.

Question

지금은 아래 그림과 같이 겹치기 때문에 사각형 노드를 분리하려고합니다.

나는 D3가 nodeSizeseparation 메서드를 제공한다는 것을 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 + ")");





Related