如何在d3 js甜甜圈圖表中體現不同的色彩和傳奇？

var dataset = { 
    apples: [53245], 
    oranges: [53245], 
    lemons: [53245], 
    pears: [53245], 
    pineapples: [53245], 
}; 

var width = 500, 
    height = 500, 
    cwidth = 40; 

var color = d3.scale.category20(); 

var pie = d3.layout.pie() 
    .sort(null); 

var arc = d3.svg.arc(); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g"); 
var path = gs.selectAll("path") 
    .data(function(d) { return pie(d); }) 
    .enter().append("path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); });

我想補充我自己的顏色，每個環。我嘗試過多種設置。但無法弄清楚如何添加獨特的顏色。

有人能告訴我如何添加獨特的顏色和圖例的圖表？

謝謝

來源

2017-03-09 user1091558

這就是你正在尋找：使用j個作爲增量：'色（J）'：http://jsfiddle.net/Qh9X5/9906/ –

@AndrewReid是感謝您。你有任何想法如何爲這些戒指添加圖例？ – user1091558

要添加圖例，該過程是相當直接的。

首先，我們可以追加克至持有傳說：

var legend = svg.append('g');

D3全選，並附加說明使用數組。當你有一個對象，而不是數組，我們可以將您的條目轉換成一個數組：d3.entries(data)：

原形態：

{ 
    apples:[n], 
    oranges:[m], 
    ... 
}

而且d3.entires的結果（數據）：

[ 
    {key: "apples", value:[ [n] ]}, 
    {key: "oranges", value: [ [m] ]} 
    ... 
]

有了這個我們可以附加一個g元件爲需要是陣列中的每個元素：

var entries = legend.selectAll('g') 
.data(d3.entries(dataset)) 
.enter() 
.append('g') 
.attr('transform',function(d,i) { console.log(d); 
    return 'translate(30,'+(30+i*30)+')'; 
});

請注意，每個g有一個稍微不同的變換。這樣矩形和文本不需要唯一的變換，它已經與g完成了。

然後，我們可以追加矩形和文本到每個g在選擇entries：

entries.append('rect') 
    .attr('fill',function(d,i) { return color(i); }) 
    .attr('width',20) 
    .attr('height',20) 
    .attr('x',20) 

entries.append('text') 
    .text(function(d) { return d.key; }) 
    .attr('x',50) 
    .attr('y',10)

注：您的svg變量表示的含所附g它可以對圓環圖變換適當的選擇。我已經創建了一個新的變量來保存這個g並附加了圖表。然後，我創建了一個附加的g（legend），它直接附加到svg，使轉換更容易管理。

更新小提琴：http://jsfiddle.net/Qh9X5/9911/

來源

2017-03-09 21:56:36

謝謝.. :-) – user1091558

如何在d3 js甜甜圈圖表中體現不同的色彩和傳奇？

回答

相關問題