如何更改使用 d3.js 创建的圆环图的颜色？答案

【问题标题】：How to change color of donut chart created using d3.js?如何更改使用 d3.js 创建的圆环图的颜色？
【发布时间】：2015-11-19 11:33:02
【问题描述】：

我对 d3 图表非常陌生。我有这个创建甜甜圈图的代码。但是，无法更改颜色。有人可以帮忙吗？

  <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 。

还有其他方法可以创建具有自定义值和颜色的圆环图吗？有人请帮忙。

提前致谢。

【问题讨论】：

标签： javascript css d3.js donut-chart

【解决方案1】：

使用有序色标。

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>

【讨论】：