원판에 d3 파이 차트 색상 할당

Question

이 pie-chart fiddle에서 내 json의 데이터 (유형 및 하위 유형)를 기준으로 슬라이스의 색상을 지정하고 싶습니다.

var data = { 
    "details": [ 
     { "id": 1, "name": "AAA", "pcArray": [25,75], "type": "c", "subtype": "p", }, 
     { "id": 2, "name": "BBB", "pcArray": [25,175], "type": "c", "subtype": "r", }, 
     { "id": 3, "name": "CCC", "pcArray": [5,95], "type": "e", "subtype": "p", }, 
     { "id": 4, "name": "DDD", "pcArray": [10,30], "type": "e", "subtype": "r", }, 
     { "id": 5, "name": "EEE", "pcArray": [0,30], "type": "c", "subtype": "r", }, 
    ], 
}; 

그래서 나는이

// 0: blue, 1: orange, 2: green, 3: red 
var color = d3.scale.category10().domain(d3.range(0,3)); 

같은 색 벡터를 할당 한

for type: "c" and subtype: "p" use color(0) 
for type: "c" and subtype: "r" use color(1) 
for type: "e" and subtype: "p" use color(2) 
for type: "e" and subtype: "r" use color(3) 

예를 들어 싶습니다하지만이 경로를 그리는시기가되면 나는 액세스 할 수 없습니다 내 원래 json 그래서 어떤 색상을 사용할 수 desable 수 있습니다. 파이() 함수가 반환하는 것만 액세스 할 수 있습니다 (예 : value/startAngle/endAngle)

그래서 내 질문은 경로를 그릴 때 원본 데이터에 액세스하여 드로잉 할 때 사용할 색을 결정할 수 있습니다. 슬라이스?

감사합니다. 그런 다음 데이터를 사용하여 (함수의 색상이 설정되어)

var d = d3.select(this.parentNode.parentNode).datum(); 

:

Answer 1

당신은 당신이 부모 노드에 바인딩 한 데이터에 DOM를 '통과'에 의해 데이터에 액세스 할 수 있습니다 색상을 설정합니다

var colorList = d3.scale.category10().range(); 
if (d.type === "c") { 
    if (d.subtype === "p") return colorList[0]; 
    if (d.subtype === "r") return colorList[1]; 
} 
else if (d.type === "e") { 
    if (d.subtype === "p") return colorList[2]; 
    if (d.subtype === "r") return colorList[3]; 
} 

업데이트 바이올린 여기 : http://jsfiddle.net/n4rba907/1/