D3.js v4.0.0-alpha.35 전환이 작동하지 않습니다.

Question

최신 버전의 d3.js를 사용하여 collapsible tree을 모방하려고 시도하지만 몇 가지 문제가 있습니다.

코드의 일부분은 nodeEnter 일 뿐이지 만 어떤 이유에서든 nodeUpdate 일명 코드의 전환 부분이 실행되지 않습니다. 나는 그것이 단지 가시성 문제가 아니라는 것을 확인하기 위해 콘솔을 본다, 나는 아무 에러도 얻지 않는다. ... 좌표는 코드의 nodeEnter 부분에 의해 시작되었을 때와 동일하게 유지된다. 내 유일한 추측은

var t = d3.transition() 
 
.duration(750) 
 
.ease(d3.easeLinear); 
 

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

 
function updateDisplay(source){ 
 
    
 
    var treeData = tree(root).descendants(), 
 
     linkData = treeData.slice(1); 
 
    
 
    treeData.forEach(function(d) { 
 
    
 
    /*Normalize for fixed-depth between levels, so that y value 
 
    ** stays the same through transition as opposed to being 
 
    ** an even division of the svg width. */ 
 
    d.y = d.depth *180; 
 
    
 
    }); 
 
    
 
          
 
    var node = svg.selectAll("g.node") 
 
       .data(treeData); 
 

 
    var nodeEnter = node.enter() 
 
         .append("g") 
 
         .attr("class", function(d) {return "node" + (d.children ? " node--internal" : " node--leaf");}) 
 
         .attr("transform", function(d) {return "translate(" + source.y0 + "," + source.x0 + ")";}); 
 
    
 
    console.log(nodeEnter); 
 
    
 
    nodeEnter.append("rect") 
 
      .attr("x", 3) 
 
      .attr("y", -10) 
 
      .attr("rx", 1e-6)//goes to 8 after transition 
 
      .attr("ry", 1e-6)//goes to 8 after transition 
 
      .attr("width", 1e-6) 
 
      .attr("height", 1e-6) 
 
      .attr("transform", function(d) {return d.children ? "scale(-1,1) translate(-20,0)" : "";}) 
 
      .attr("style", "fill:#EEEEEE;filter:url(#dropshadow)"); 
 

 
    nodeEnter.append("text") 
 
      .attr("dy", 3) 
 
      .attr("x", function(d) {return d.children ? -8 : 30;}) 
 
      .style("text-anchor", function(d) {return d.children ? "end" : "start";}) 
 
      .text(function(d) {return d.id;}) 
 
      .each(function(d) {d.NameWidth = this.getBBox().width;}) 
 
      .style("fill-opacity", 1e-6); 
 
    
 

 
    var avatar = nodeEnter.append("g").attr("style", "filter:url(#dropshadow)"); 
 

 
    avatar.append("clipPath") 
 
      .attr("id", "avatarClip") 
 
      .append("circle") 
 
      .attr("cx", 1e-6)//12.5 
 
      .attr("cy", 1e-6)//12.5 
 
      .attr("r", 1e-6);//12.5 
 

 
    avatar.append("circle") 
 
      .attr("cx", 1e-6)//12.5 
 
      .attr("cy", 1e-6)//12.5 
 
      .attr("r", 1e-6)//12.5 
 
      .attr("style", "fill:white") 
 
      .attr("transform", "translate(0,-12)"); 
 

 
    avatar.append("image") 
 
      .attr("xlink:href", function(d) {return (d.data.img ? d.data.img : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/ic_person_black_48px.svg");}) 
 
      .attr("clip-path", "url(#avatarClip)") 
 
      .attr("class", function(d) {return (d.children ? "avatar--manager" : "");}) 
 
      .attr("width", 25) 
 
      .attr("height", 25) 
 
      .attr("transform", "translate(0,-12)"); 
 
    
 
    avatar.on("click", function(d) {toggle(d);}); 
 
    
 
    //TRANSITION OF NODES TO NEW POSITIONS 
 
    var nodeUpdate = node.transition(t) 
 
         .attr("class", function(d) {return "node" + (d.children ? " node--internal" : " node--leaf");}) 
 
         .attr("transform", function(d) {return "translate(" + d.y + "," + d.x + ")";}); 
 
    
 
    nodeUpdate.select("text") 
 
    .attr("x", function(d) {return d.children ? -8 : 30;}) 
 
    .style("text-anchor", function(d) {return d.children ? "end" : "start";}) 
 
    .text(function(d) {return d.id;}) 
 
    .style("fill-opacity", 1); 
 

 
    nodeUpdate.select("rect") 
 
       .attr("transform", function(d) {return d.children ? "scale(-1,1) translate(-20,0)" : "";}) 
 
       .attr("height", 20) 
 
       .attr("width", function(d) {return (d.NameWidth + 35);}); 
 
    
 
    nodeUpdate.select("clipPath") 
 
       .attr("cx", 12.5) 
 
       .attr("cy", 12.5) 
 
       .attr("r", 12.5); 
 
    
 
    nodeUpdate.select("circle") 
 
      .attr("cx", 12.5) 
 
      .attr("cy", 12.5) 
 
      .attr("r", 12.5); 
 

 
    nodeUpdate.select("image") 
 
    .attr("xlink:href", function(d) {return (d.data.img ? d.data.img : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/ic_person_black_48px.svg");}) 
 
    .attr("clip-path", "url(#avatarClip)") 
 
    .attr("class", function(d) {return (d.children ? "avatar--manager" : "");}); 
 
    
 
    //TRANSITIONING EXITING NODES 
 
    var nodeExit = node.exit() 
 
        .transition(t) 
 
        .attr("transform", function(d) {return "translate(" + source.y + "," + source.x + ")";}) 
 
        .remove(); 
 
    
 
    
 
    
 
    /*var link = svg.selectAll(".link") 
 
       .data(linkData);*/ 
 
    
 

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

PS는 ... 뭔가 d3.js의 새로운 버전으로 변경하고 뭔가를 놓치고 있다는 것입니다 : 내 코드가 링크의 정확한 복제되지 않습니다 위의 경우 디자인 할 때 내 자신의 스핀을 넣어 ...

Answer 1

입력 및 업데이트 선택 항목이 v3에서 v4로 개념적으로 변경되었습니다. v3에서는 입력 선택이 자동으로 업데이트 선택 항목에 병합되는 반면, 동일한 결과를 얻으려면 명시 적으로 selection.merge()을 v4에서 위로 호출해야합니다.

V3의 selection.enter()에 대한 문서는 이렇게 알려줍니다

업데이트 선택 당신이 추가하거나 삽입에 병합 선택을 입력합니다.

입력 선택은 전형적 요소를 추가하기 위해 일시적으로 사용하고, 추가 한 후 업데이트 선택 자주 merged이다

V4 동일한 방법 문서는 반면에, 판독 따라서 요소를 입력하고 업데이트하는 데 수정을 적용 할 수 있습니다. 하지만,

var update = d3.select("svg").selectAll("circle") 
 
    .data([1]); 
 
    
 
var enter = update.enter() 
 
    .append("circle") 
 
    .attr("cx", "50") 
 
    .attr("cy", "50") 
 
    .attr("r", "20") 
 
    .attr("fill", "red"); 
 
    
 
update 
 
    .transition().duration(2000) 
 
    .attr("fill", "blue"); 
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg></svg>

V4와 같은 일을 조금 수정이 필요합니다 :

없이 놀라움과 함께 제공되어야 V3를 사용하여이 간단한 예에서보세요

var update = d3.select("svg").selectAll("circle") 
 
    .data([1]); 
 
    
 
var enter = update.enter() 
 
    .append("circle") 
 
    .attr("cx", "50") 
 
    .attr("cy", "50") 
 
    .attr("r", "20") 
 
    .attr("fill", "red"); 
 
    
 
update 
 
    .merge(enter) // This merges both the enter and the update selection 
 
    .transition().duration(2000) 
 
    .attr("fill", "blue");

<script src="https://d3js.org/d3.v4.min.js"></script> 
 

 
<svg></svg>

.merge() 줄을 주석 처리하면 앞에서 입력 선택을 사용하여 새 요소를 입력했지만 업데이트 선택이 비어 있기 때문에 설명 된 효과가 나타납니다.