d3.js自定義顏色怪異行爲 - 漸變問題

我有一個關於d3.js着色的奇怪行爲的問題。我想要一個餅圖中創建漸變，我用2個解決方案：d3.js自定義顏色怪異行爲 - 漸變問題

var data = 
[1,1,1,1,1,1,1,1,1,1,  
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1, 
1,1,1,1,1,1,1,1,1,1]; 


    var length = 100; 
    var color = d3.scale.linear().domain([1,length]) 
    .interpolate(d3.interpolateHcl) 
    .range([d3.rgb("#5C97C1"), d3.rgb('#FFC357')]); 

// var color = d3.scale.ordinal() 
// .domain(data) 
// .range(
// ["#5C97C1", "#6199BE", "#639ABC", "#689CB9", "#6C9EB6", "#6F9FB4", "#73A1B1", "#78A3AD", "#7BA5AA", "#81A7A6", 
// "#84A8A4", "#88AAA1", "#8BAC9F", "#8FAD9C", "#93AF99", "#97B196", "#9BB393", "#9FB491", "#A2B68E", "#A8B88A", 
// "#ABBA88", "#AFBC85", "#B2BD82", "#B7BF7F", "#BAC07D", "#BFC379", "#C3C476", "#C7C674", "#CAC871", "#CEC96E", 
// "#D3CB6B", "#D1CB6C", "#D7CD68", "#DBCF65", "#DDCE64", "#DECE64", "#DFCE63", "#E0CD63", "#E1CD62", "#E3CC62", 
// "#E3CC61", "#E5CC61", "#E6CB60", "#E7CB60", "#E8CB5F", "#E9CA5F", "#EACA5F", "#EBCA5E", "#ECC95E", "#EEC95D", 
// "#EFC85D", "#F0C85C", "#F1C85C", "#F2C75B", "#F3C75B", "#F4C75A", "#F5C65A", "#F6C65A", "#F8C559", "#F9C559", 
// "#FAC558", "#FBC458", "#FCC457", "#FDC457", "#FEC356", "#FEC256", "#FDBF57", "#FBBC58", "#FAB959", "#F9B759", 
// "#F8B45A", "#F6B05C", "#F5AD5C", "#F3AA5D", "#F2A85E", "#F0A55F", "#EFA260", "#ED9E61", "#EC9C61", "#EB9962", 
// "#EA9763", "#E79264", "#E69065", "#E58D66", "#E48B66", "#E38867", "#E18568", "#DF8169", "#DE7E6A", "#DC7B6B", 
// "#DD7C6B", "#DB796C", "#D9756D", "#D8736D", "#D7706E", "#D56D6F", "#D46B70", "#D36871", "#D06272", "#CF6173"]);

或完整版本在這裏http://codepen.io/Balzzac/pen/EZGwGy?editors=1000

而且我得到了第一片怪異的行爲和100在這兩種情況下的第50個。我想了解爲什麼以及如何解決它？

來源

2017-02-12 Мария

更奇怪的是，這看起來只是一個問題（至少在Mac上）。 Safari和Firefox正常渲染 –

我可以確認Ubuntu上的Chrome有這個渲染問題，而Firefox則沒有。奇怪。也許值得在相關的d3 github頁面上提交bug報告。雖然請注意，您正在使用v3，而d3現在是v4，並進行了一些重大更改。 –

也可以確認在使用d3 4.0時出現相同的問題，但只能在Chrome上出現。 –

有點挖後，這裏就是我發現。

該問題主要是因爲pie(data)的調用不按照上升的順序返回數據。當你想讓你的條形圖最大最小時，這不是問題，但在你的情況下，這會造成問題。

你可以看到自己這一點，當你調用控制檯d3.layout.pie()(data) - 值是幾乎排序，但也有一些例外。

在D3 V3.0，解決的辦法是打電話.sort(null)設置您的餅圖時：

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

如果使用D3 V4.0（你應該！），解決的辦法是打電話.sortValue(null)：

var pie = d3.pie().sortValues(null);

順便說一句，相關變更轉換爲D3 4.0是：

<script src="https://d3js.org/d3.v4.min.js"></script> 

.... 

var color = d3.scaleLinear().domain([1,length]) 
    .interpolate(d3.interpolateHcl) 
    .range([d3.rgb("#5C97C1"), d3.rgb('#FFC357')]); 

var arc = d3.arc() 
    .outerRadius(radius) 
    .innerRadius(0); 

var pie = d3.pie().sortValues(null); 

....

關於瀏覽器之間的差異，我懷疑它與different sort implementations between browsers有關，但不是100％確定的。

來源

2017-02-13 01:43:17

仍然在Chrome中無法正常工作，但感謝您的建議！ –

從顏色中去除了縮放 - 現在看起來工作正常。 –

d3.js自定義顏色怪異行爲 - 漸變問題

回答

相關問題