我想製作一個'甜甜圈'圖表,我目前正在努力與D3尺度和顏色。如果您打開我目前的圖表:https://jsfiddle.net/dtr7hrg2/,您會注意到值0和5.26共享完全相同的顏色。我想這是因爲這兩個值落在相同的範圍內。我的域名是[0,100]。我想要實現的是將該域映射到範圍[0,100],該範圍對應於以下顏色["#000000", "#5F192A", "#B12848", "#EC335C"]
之間的線性轉換,其中0.0屬於#000
,而100.0屬於#B12848
。 有人可以給我一個暗示我做錯了什麼嗎?任何幫助將不勝感激!甜甜圈圖 - 地圖域的顏色範圍(過渡)
0
A
回答
0
它不是完全一樣的顏色,你做了什麼是正確的
console.log(heat_map_color(5)) // rgb(14, 4, 6)
console.log(heat_map_color(0)) // rgb(0, 0, 0)
這些顏色是如此接近,你可以不出區別。
1
如果要的顏色#000000
和#B12848
之間的線性範圍可以創建內插函數和擴展其輸入爲0.0之間和1.0:
var chart = d3.select("#chart");
var color = d3.interpolate('#000000', '#B12848');
for (var i = 0; i <= 100; i++) {
chart.append('span').attr('class', 'colorBlock').attr('style', function (d) {
return 'background-color: ' + color(i/100.0);
});
}
但是,正如添乙指出0到5之間的顏色幾乎不可辨別。
相關問題
- 1. Shinobi甜甜圈圖標籤顏色不會改變
- 2. jqPlot:甜甜圈圖中心的圖例
- 3. SVG圈 - 動畫片段? (甜甜圈圖)
- 4. Chartjs套餐餅圖/甜甜圈圖表
- 5. angular-chart.js甜甜圈圖:如何更改甜甜圈弧的寬度?
- 6. SVG:餅圖中的甜甜圈洞
- 7. kendoui圖甜甜圈設置亮點
- 8. chart.js之圖片甜甜圈段內
- 9. 綁定莫里斯甜甜圈圖表
- 10. charts.js分層甜甜圈餅圖
- 11. 甜甜圈圖僅使用SVG標記
- 12. MVC System.Web.Helpers甜甜圈圖標籤定位
- 13. 隱藏標示甜甜圈圖表r
- 14. Highchart甜甜圈和條形圖
- 15. ggplot2餅圖和甜甜圈圖在同一個地塊
- 16. GWT Highcharts - 半圈甜甜圈
- 17. Chart.js v2:甜甜圈裏面的甜甜圈之間的空間
- 18. ggplot2:甜甜圈,如何有條件的顏色填充if_else
- 19. 甜甜圈Highcharts設置不同的顏色內和外數據
- 20. highcharts甜甜圈派 - 不同顏色的數據比鑽取
- 21. Chart.JS - 填充甜甜圈
- 22. 角2 NG2-圖表甜甜圈變化段色
- 23. 動態加載角d3甜甜圈
- 24. Chartjs甜甜圈消失
- 25. JavaFX - 繪製甜甜圈
- 26. 甜甜圈緩存教程
- 27. 甜甜圈緩存ASP.NET MVC2
- 28. Java甜甜圈遊戲
- 29. 選擇開關d3甜甜圈弧
- 30. Chart.js - 定位甜甜圈標籤