원호/요소 선택

Question

에서 햇살, 모든 호가 생성된 직후 코드에서 루트 호를 선택하도록 하려면 어떻게 해야 합니까?

예를 들어, 코드에서:

var first_arc = ""
.json("../data/flare.json", function(json) {
   var path = vis.data([json]).selectAll("path")
       .data(partition.nodes)
     .enter().append("path")
       .attr("display", function(d) { return d.depth ? null : "none"; })
       .attr("d", arc)
       .attr("t_name", function(d) {return d.name})
       .style("fill-rule", "evenodd")
       .on("click", function(d)...

중간 호를 클릭하면 "함수"에 "d"로 전달됩니다.

(해당 데이터는 json 파일에서 먼저 옵니다)

업데이트 1:코드를 이렇게 바꾸다니...

.style("fill-rule", function(d) {
   if (first_arc == "") first_arc = d; return "evenodd"})

...문제가 해결되면 반환됩니다. object:

name: "flare"
children: Array[10]
...

하지만 이 해결책은 옳아 보이지도 않고 일반적이지도 않습니다.

업데이트 2:예를 들어 다음과 같은 몇 가지 선택을 시도했습니다.

first_arc = d3.select("[name='flare']")

보통은 돌아오는데 array:

0: null
length: 1
parentNode: HTMLHtmlElement
__proto__: Array[0]

또는 "정의되지 않음"

업데이트 3:

first_arc = d3.select("[t_name='flare']")

보고 array 어린이가 있는 경우 1호 사이즈:

0: SVGPathElement
   __data__: Object

, 어디 __data__ 은(는) 제가 찾고 있는 개체이지만 선택할 수 없습니다.

Answer 1

루트 노드는 "깊이" 속성이 0으로 설정된 노드입니다.그래서 당신은 말할 수 있습니다 :

d3.selectAll("path").filter(function(d) { return d.depth === 0; })

위의 시도가 작동하지 않은 이유는 다음과 같습니다. D3는 CSS3를 사용하여 요소를 선택합니다..따라서 d3.select 및 d3.selectAll만 사용할 수 있습니다. CSS3 선택자, 즉이 방법으로는 각 요소에 바인딩된 데이터에 액세스할 수 없습니다.바인딩된 데이터를 필터링하는 방법은 다음을 사용하는 것입니다. 선택.필터.

D3 선택 말 그대로 요소의 배열입니다. "선택 항목에 대한 작업" 섹션을 참조하세요.

마지막으로, 당신은 경계를 얻을 수 있습니다 __data__ 다음을 사용하는 요소의 속성 선택.데이텀().