D3 샌키 차트의 특정 노드 만 원에서 원으로 변환

Question

D3 Sankey chart using circle node instead of rectangle node에서 프로세스를 재현하고 싶습니다. 그러나 특정 노드 만 선택하여 사각형에서 원으로 변경하고 싶습니다.

예를 들어이 예에서 사용 된 jsfiddle에서는 Node 4과 Node 7만이 원으로 변환 되나요?

Answer 1

나는 당신의 fiddle 업데이트.

기본적으로 다른 노드를 선택하기위한 방법이 필요합니다. 고유 한 클래스 이름을 사용하여 CSS로 스타일을 지정할 수 있습니다. 나는 그냥 짝수 노드를 모두 선택하기 때문에 단지 4와 7 (게으르다)을 선택하는 코드를 작성하는 것 같지 않았다.

// add in the nodes 
var node = svg.append("g").selectAll(".node") 
    .data(graph.nodes) 
    .enter().append("g") 
    .attr("class", function (d, i) { return i % 2 ? "node rect" : "node circle"; 
}) 

그러면 노드를 선택하고 직사각형 대신 원을 추가 할 수 있습니다.

svg.selectAll(".node.circle").append("circle") 
    .attr("r", sankey.nodeWidth()/2) 
    .attr("cy", function(d) { return d.dy/2; }) 
    .attr("cx", sankey.nodeWidth()/2) 
    .style("fill", function (d) { 

Answer 2

jsfiddle에 설명 된 유사한 접근 방식이 있습니다.

다음

나는 기존 수정 :

---

나는 모든 노드가 이미 원으로 전환했다), (또 다른 당신이 merntioned SO question에서) this fiddle에서 시작 서클을 만드는 동안 필터링을 포함하는 새로운 코드가 추가되었습니다.

// add the circles for "node4" and "node7" 
node 
    .filter(function(d){ return (d.name == "node4") || (d.name == "node7"); }) 
    .append("circle") 
    .attr("cx", sankey.nodeWidth()/2) 
    .attr("cy", function (d) { 
     return d.dy/2; 
    }) 
    .attr("r", function (d) { 
     return Math.sqrt(d.dy); 
    }) 
    .style("fill", function (d) { 
     return d.color = color(d.name.replace(/ .*/, "")); 
    }) 
    .style("fill-opacity", ".9") 
    .style("shape-rendering", "crispEdges") 
    .style("stroke", function (d) { 
     return d3.rgb(d.color).darker(2); 
    }) 
    .append("title") 
    .text(function (d) { 
     return d.name + "\n" + format(d.value); 
    }); 

// add the rectangles for the rest of the nodes 
node 
    .filter(function(d){ return !((d.name == "node4") || (d.name == "node7")); }) 
    .append("rect") 
    .attr("y", function (d) { 
     return d.dy/2 - Math.sqrt(d.dy)/2; 
    }) 
    .attr("height", function (d) { 
     return Math.sqrt(d.dy); 
    }) 
    .attr("width", sankey.nodeWidth()) 
    .style("fill", function (d) { 
     return d.color = color(d.name.replace(/ .*/, "")); 
    }) 
    .style("fill-opacity", ".9") 
    .style("shape-rendering", "crispEdges") 
    .style("stroke", function (d) { 
     return d3.rgb(d.color).darker(2); 
    }) 
    .append("title") 
    .text(function (d) { 
     return d.name + "\n" + format(d.value); 
    }); 

직사각형 옆의 정확한 위치 지정 텍스트에 대해 유사한 코드를 수정해야했습니다.

원본 Sankey의 특성을 잃어 버렸지 만 최종 결과는 자연스러워 보입니다.