d3에 선이 깔려있을 때

Question

(먼저 Google 그룹에 올렸지 만 응답이 없으므로 여기에 게시해야한다고 가정).

파이 (노란색 및 흰색 세그먼트) 위에 햇살 (색이있는 호)을 놓으려고합니다. 모든 세그먼트가 올바르게 나타낸 곳 파이 않고 JS 바이올린

하고 :

http://jsfiddle.net/qyCkB/1/ : 여기

의 문제점을 나타내는 JS 바이올린 인 초기 녹색 세그먼트를 누락 :

http://jsfiddle.net/X3sRy/1/

가이 라인에 생성 된 후에 나는 노드 변수를 확인했다 :

var nodes = partition.nodes({'values': data}); 

와 값이 두 예에서 모두 동일하게 나타납니다.

DOM을 검사 할 때 햇빛의 처음 몇 세그먼트 만 그릴 수 있습니다.

두 개의 서로 다른 레이아웃을 위에 놓을 수 없습니까? 같은 것을 달성하는 더 좋은 방법이 있습니까?

Answer 1

두 번째 데이터 조인이 첫 번째 데이터 조인과 충돌합니다. 첫 번째 데이터 조인은 "g.arc"에 있으므로 G 요소에 "arc"클래스를 추가해야합니다 ("clock_arc"가 아님). 두 번째 데이터 조인은 이전에 추가 한 경로 요소를 우연히 선택하는 "경로"에 있습니다. 두 번째 데이터 조인은 이전에 추가 된 요소와 일치하므로 파이의 예상 요소를 모두 입력하지는 않습니다.

은 파이 경로 요소에서 sunburst 경로 요소를 명확히 구분해야합니다. 이 작업을 수행하는 한 가지 방법은 요소 유형이 아닌 클래스별로 선택하는 것이므로 두 번째 데이터 조인은 "경로"가 아니라 ".pie"가됩니다. 이런 식으로 뭔가 : 나는 또한 당신이 아직없는 경우,이 튜토리얼을 읽고 권하고 싶습니다

var gClock = svg.selectAll(".clock") 
    .data(clockData) 
    .enter().append("g") 
    .attr("class", "clock"); 

var pathClock = gClock.append("path"); 

var pathPie = svg.selectAll(".pie") 
    .data(pieData) 
    .enter().append("path") 
    .attr("class", "pie"); 

: Thinking with Joins, Nested Selections, Object Constancy.