D3 파이 차트 0 데이터 포인트 변경 아크 채우기 색상

Question

나는 포럼과 d3에 새로운입니다, 어떤 도움을 주시면 감사하겠습니다. 이 jsfiddle에서 싶습니다 :

1. 링크 특정 아크 색상에 데이터 "ITEMLABEL". 나는 12 개의 "itemLabel 's"와 12 가지 색상을 가지고 있으며 동일하게 유지되기를 원한다. 문제는 모든 "itemlabel"에있는 데이터 itemValue=0에 다음 모든 호의 색상이 변경 될 때입니다. 나는 그것이 왜 변하는 지 알고있다. (0 데이터 포인트를 건너 뛰고 0이 아닌 데이터 포인트에 다음 컬러를 표시한다.) 나는 그것을 고치는 방법을 모른다. 나는 하루 종일 코드를 읽었고 여전히 운이 없다. 예를 들어 슬라이더가 이동하면 "호주 주식"은 항상 짙은 녹색 #8BC92F이어야합니다.

2. 중간에 슬라이더를 시작하십시오. 중간에 슬라이더를 배치하는 방법을 알고 있지만 로딩 할 때 위치에 대한 그래프를 렌더링하고 싶습니다.

는 세그먼트를 채우는 당신이

var color = d3.scale.ordinal() 
.range([ "#06a6d8", "#5CBEE6","#94CFE6", "#8BC92F", "#C1DA12", "#F2F001", "#FEB132", "#FB9400", "#EB6D00", "#F9588A", "#F22766", "#CE8AFF"]); 

.attr("fill", function(d, i) { return color(i); }) 

Answer 1

1) 당신은 인덱스를 사용 감사합니다

.attr("fill", function(d, i) { return color(i); }) 

그래서, 업데이트시 데이터의 길이가 변경 (itemValue=0 경우) 적절한 호의 채우기 색상도 변경됩니다.

당신은 당신의 color 규모의 도메인을 설정해야합니다

const dataLabels = dataStructure[0].data 
    .map(function(item) { return item.itemLabel; }); 

저장 .domain 재산 dataLabels 변수

color.domain(dataLabels); 

패스를하는 라벨의 배열입니다. 그 후, 당신은 레이블 이름으로 연관된 색상을 얻을 수 있습니다 :

paths.enter().append("svg:path") 
    .attr("stroke", "white") 
    .attr("stroke-width", 2) 
    .attr("fill", function(d, i) { return color(d.name); }) // <--!!! 
    .transition() 
    .duration(tweenDuration) 
    .attrTween("d", pieTween); 

paths 
    .attr("fill", function(d, i) { return color(d.name); }) // <--!!! 
    .transition() 
    .duration(tweenDuration) 
    .attrTween("d", pieTween); 

2) 당신은 당신은 페이지의 로딩 후 update 기능과 슬라이더의 value 속성에 표시 할 데이터 세트의 인덱스를 통과해야 구성 개체. 데이터의 길이는 21이므로 중간에 슬라이더 위치를 표시하려면 10 또는 11을 전달해야합니다.

var middleDatasetIndex = Math.floor(dataStructure.length/2); // = 11 

$("#slider").slider({ 
    value: middleDatasetIndex, // <-- !!! 
    min: 0, 
    max: 21, 
    step: 1, 
    slide: function(event, ui) { 
     update(ui.value); 
     console.log(ui.value); 
     } 
}) 
... 
update(middleDatasetIndex); // <--!!! 

체크 the working demo.