추가 값이 d3 차트 서수 도메인에 삽입됩니다.

Question

전설이있는 기본 d3 원형 차트를 만들려고합니다. 두 개의 다른 튜토리얼에있는 예제를 따르고 있는데, 어떻게 든 한 예제의 코드가 다른 예제와 잘 작동하지 않습니다. 내가하려고하는 것은 ordinal 척도의 영역을 설정하여 전설을 만드는 데 사용할 수 있습니다.

다음 줄에 도메인을 설정합니다. 코드를 단계별로 실행하면 [ "HEURISTIC", "ADWARE", "COMPANY_BLACK_LIST", "PUP", "SUSPECTED_MALWARE", "KNOWN_MALWARE"]가 표시됩니다. 이것은 내가 원하는 것입니다.

color.domain(labels) 

그러나, 나는 통해 스테핑 계속하면 내가 다음 줄에 도달하면, [ "휴리스틱", "애드웨어", "COMPANY_BLACK_LIST", "PUP", "SUSPECTED_MALWARE"로 도메인 변경, "KNOWN_MALWARE" , 0, 1, 2, 3, 4, 5는]

arcs.append("svg:path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", arc); 

질문 : 여섯 개 추가 항목을 일으키는 어떤 것이 도메인에 삽입?

코드 (http://jsfiddle.net/tonicboy/2urZY/5/는) :

여기

var w = 150, 
    h = 100, 
    r = 50, 
    color = d3.scale.category20c(), 
    dataset = [{"name":"HEURISTIC","value":65},{"name":"ADWARE","value":75},{"name":"COMPANY_BLACK_LIST","value":9},{"name":"PUP","value":34},{"name":"SUSPECTED_MALWARE","value":14},{"name":"KNOWN_MALWARE","value":156}], 
    labels = _.pluck(dataset, "name"); 

color.domain(labels); 

var chart = d3.select("#pie_chart") 
    .append("svg:svg") 
    .data([dataset]) 
    .attr("width", "100%") 
    .attr("height", "100%") 
    .attr("viewBox", "0 0 " + w + " " + h) 
    .attr("preserveAspectRatio", "xMinYMin meet"); 

var vis = chart.append("g") 
    .attr("transform", "translate(" + (w - r) + "," + r + ")"); 

var arc = d3.svg.arc() 
    .outerRadius(r); 

var pie = d3.layout.pie() 
    .value(function(d) { return d.value; }); 

var arcs = vis.selectAll("g.slice") 
    .data(pie) 
    .enter() 
    .append("svg:g") 
    .attr("class", "slice"); 

arcs.append("svg:path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", arc); 

var legend = chart.append("g") 
    .attr("class", "pie-legend") 
    .selectAll("g") 
    .data(color.domain()) 
    .enter() 
    .append("g") 
    .attr("transform", function(d, i) { return "translate(0," + i * 7 + ")"; }); 

legend.append("rect") 
    .attr("width", 5) 
    .attr("height",5) 
    .style("fill", color); 

legend.append("text") 
    .attr("x", 8) 
    .attr("y", 9) 
    .text(function(d) { return d; }); 

차트 지금까지 모습입니다 : 당신은 문자열로 서수 규모의 도메인을 설정,하지만 전화하는거야

Answer 1

그것 지수 번호와. 도메인에 현재없는 값에 대해 서수 배율을 묻는 경우 도메인에 추가하고 범위의 다음 값을 할당합니다 (또는 범위가 부족한 경우 범위 값을 다시 사용).

원래 코드 :

arcs.append("svg:path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", arc); 

가

arcs.append("svg:path") 
    .attr("fill", function(d, i) {return color(d.data.name); }) 
    .attr("d", arc); 

d 값이어야 파이 차트 함수에 의해 생성 된 오브젝트이며; 원본 데이터 개체는 d.data으로 저장됩니다. 해당 데이터의 이름은 색상 스케일 도메인에서 사용되는 값 중 하나입니다.

업데이트 됨 : http://jsfiddle.net/2urZY/6/