如何更改使用d3.js创建的圆环图的颜色？ [英] How to change color of donut chart created using d3.js?
本文介绍了如何更改使用d3.js创建的圆环图的颜色？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是d3图表的新手。我有这个代码创建圆环图。但是，无法更改颜色。有人可以帮忙吗？
I am very new to d3 charts. I have this code that creates donut charts. However, unable to change colors. could some one help ?
<body>
<div id="chart"></div>
<script src="d3.v3.min.js"></script>
<script>
(function(d3) {
'use strict';
var dataset = [
{ label: 'Abulia', count: 10 },
{ label: 'Betelgeuse', count: 20 },
{ label: 'Cantaloupe', count: 30 },
{ label: 'Dijkstra', count: 40 }
];
var width = 360;
var height = 360;
var radius = Math.min(width, height) / 3.5;
var donutWidth = 50; // NEW
var color = d3.scale.category20b();
var svg = d3.select('#chart')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + (width / 2) +
',' + (height / 2) + ')');
var arc = d3.svg.arc()
.innerRadius(radius - donutWidth) // NEW
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d) { return d.count; })
.sort(null);
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.label);
});
})(window.d3);
</script>
</body>
</html>
我想要这些颜色的甜甜圈＃65C400，＃2290EE，＃FFC096。
I would like to get donut with these colors #65C400 , #2290EE , #FFC096 .
有没有其他方法来创建一个具有自定义值和颜色的圆环图？
Is there any other way to create a donut chart with custom values and colors ?? someone pls help.
提前感谢。
推荐答案
var color = d3.scale.ordinal()
.domain(["Abulia", "Betelgeuse", "Cantaloupe","Dijkstra"])
.range(["#65C400" , "#2290EE" , "#FFC096", "#5e5e5e"]);
var dataset = [{
label: 'Abulia',
count: 10
}, {
label: 'Betelgeuse',
count: 20
}, {
label: 'Cantaloupe',
count: 30
}, {
label: 'Dijkstra',
count: 40
}];
var color = d3.scale.ordinal()
.domain(["Abulia", "Betelgeuse", "Cantaloupe","Dijkstra"])
.range(["#65C400" , "#2290EE" , "#FFC096", "#5e5e5e"]);
var width = 360;
var height = 360;
var radius = Math.min(width, height) / 3.5;
var donutWidth = 50; // NEW
var svg = d3.select('#chart')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + (width / 2) +
',' + (height / 2) + ')');
var arc = d3.svg.arc()
.innerRadius(radius - donutWidth) // NEW
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d) {
return d.count;
})
.sort(null);
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.label);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>
这篇关于如何更改使用d3.js创建的圆环图的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
