루트 노드가 전달 될 때 d3 트리 맵 레이아웃이 캐시됩니까?

Question

나는 애니메이션을하는 D3의 트리 맵을 얻으려고 노력하고,이 답변에 따라

App.svg = d3.select("#medals-tree-map").append("svg:svg") 
    .style("width", App.canvasWidth) 
    .style("height", App.canvasHeight) 
    .append("svg:g") 
    .attr("transform", "translate(-.5,-.5)") 
    .attr("id", "container"); 

App.treemap = d3.layout.treemap() 
    .size([App.canvasWidth + 1, App.canvasHeight + 1]) 
    .value(function(d) { return d.number; }) 
    .sticky(true); 

function drawGraphFromJson(data) { 
    // Draw the graph 
    var leaves = App.treemap(data); 

    var cell = App.svg.selectAll("g.cell") 
    .data(leaves); 

    // More rendering code 
} 

같은 있었다 : 내가 함께 drawGraphFromJson를 호출 할 때 https://stackoverflow.com/a/9650825/111884

그러나, 트리 맵은 전혀 변경하지 않습니다 새로운 데이터.

나는

function drawGraphFromJson(data) { 
    App.treemap = d3.layout.treemap() 
    .size([App.canvasWidth + 1, App.canvasHeight + 1]) 
    .value(function(d) { return d.number; }) 
    .sticky(true); 

    // Draw the graph 
    var leaves = App.treemap(data); 

    var cell = App.svg.selectAll("g.cell") 
    .data(leaves); 

    // More rendering code 
} 

왜 내가이 작업을 수행 할 필요가 수행 drawGraphFromJson 즉 내부 App.treemap를 정의하여 문제를 해결? 루트 노드를 전달할 때 treemap이 캐시됩니까?

Answer 1

예, treemap.sticky(true)을 설정하면 레이아웃이 부분적으로 캐시됩니다. treemap.sticky에 대한 설명서를 참조하십시오.

treemap.sticky에 대한 기대는 레이아웃에 대한 입력과 동일한 루트 노드를 사용하지만 값 기능을 변경하여 하위 노드의 크기를 변경하는 것입니다. 고정 트리 맵 레이아웃으로 값 기능을 변경하는 예는 D3 웹 사이트 treemap visualization을 참조하십시오. 이 제약 조건이 적용되는 이유는 고정 레이아웃에서는 트리의 토폴로지가 변경 될 수 없기 때문에 같은 계층에 같은 수의 노드가 있어야하기 때문입니다. 변화하는 유일한 것은 가치입니다.

두 개의 서로 다른 데이터 집합으로 drawGraphFromJson을 호출하는 경우 treemap.sticky(false)을 설정해야합니다. 그렇지 않으면 두 데이터 집합을 단일 계층으로 병합 한 다음 값 함수를 변경하여 둘 사이에서 애니메이션을 적용해야합니다.

또한 렌더링 코드를 포함하지 않았으므로 데이터 결합에 오류가있을 수 있습니다. 그러나 나는 끈적한 설명이 더 많은 것으로 생각한다. 자세한 내용은 Thinking with Joins을 참조하십시오.