D3.js饼图：如何根据我自己的分类自动创建和分配渐变颜色比例

我希望标题不要太混乱，但我很难清楚地表述这个问题。不管怎样，我还是要试一试。首先， 这是，这是我的数据：

DATA.CSV
voce;categoria;val2015
amministrazione;funzioni;404571081
sociale;funzioni;235251679
territorio e ambiente;funzioni;286164667
viabilità e trasporti;funzioni;144185664
istruzione;funzioni;168774925
cultura;funzioni;55868045
sport;funzioni;27219432
turismo;funzioni;9544845
sviluppo economico;funzioni;14790363
servizi produttivi;funzioni;4334
polizia locale;funzioni;99007202
giustizia;funzioni;12147068
anticipazioni di cassa;rimborso prestiti;304323808
finanziamenti a breve termine;rimborso prestiti;0
prestiti obbligazionari;rimborso prestiti;38842996
quota capitale di debiti pluriennali;rimborso prestiti;0
quota capitale di mutui e prestiti;rimborso prestiti;128508755
spese per conto terzi;altro;232661261
disavanzo di amministrazione;altro;0

这张图表应该显示政府如何将预算分配给不同的职能。每个数据点的特点是：

“voce”：分配部分预算的职能

“类别A”：各项费用的宏观类别。其中有三个：“funzioni”；“rimborso prestiti”；和“阿尔特罗”

“val2015”：2015年分配给该职能的资金的绝对价值

在我的想象中，我把两个馅饼放在了一起。innerPie将预算划分为三个宏观类别。outerPie将其划分为19个不同的函数

我想为每个宏类别指定一种颜色（分别是绿色、红色和蓝色）。然后，我希望将类别的所有功能以其宏观类别颜色的渐变着色。

例如，如果“funzioni”变为绿色，那么我希望属于该类别的12个函数从浅绿色逐渐变为深绿色

首先，我想我应该手动分配颜色。然而，我找不到一个颜色酿酒厂，可以提供12种给定颜色的色调

然后我想我会换颜色。如果宏类别1为绿色，则函数1为浅绿色，函数2为深绿色，函数3为浅绿色，依此类推。。但某些函数的绝对值为0（即，该年没有为该函数分配预算）。由于这些函数不会出现在饼图中，因此相同颜色的两个函数可能会相邻出现。代码如下：

var color = d3.scale.ordinal()
            .domain(["amministrazione", "sociale", "territorio e ambiente", "viabilità e trasporti", "istruzione", "cultura", "sport", "turismo", "sviluppo economico", "servizi produttivi", "polizia locale", "giustizia", "anticipazioni di cassa", "finanziamenti a breve termine", "prestiti obbligazionari", "quota capitale di debiti pluriennali;", "quota capitale di mutui e prestiti", "spese per conto terzi", "disavanzo di amministrazione"])
            .range(["rgb(116,196,118)", "rgb(35,139,69)", "rgb(116,196,118)", "rgb(35,139,69)", "rgb(116,196,118)", "rgb(35,139,69)", "rgb(116,196,118)", "rgb(35,139,69)", "rgb(116,196,118)", "rgb(35,139,69)", "rgb(116,196,118)", "rgb(35,139,69)", "rgb(251,106,74)", "rgb(103,0,13)", "rgb(251,106,74)", "rgb(103,0,13)", "rgb(251,106,74)", "rgb(116,196,118)", "rgb(0,68,27)"]);

var colorInner = d3.scale.ordinal()
            .domain(["funzioni", "rimborso prestiti", "altro"])
            .range(["rgb(0,68,27)", "rgb(203,24,29)" , "rgb(33,113,181)"]); 

解决方案是为每个宏类别使用三个阴影。这将解决问题，但我正在寻找一个更灵活的解决方案

由于我计划在我的数据集中添加更多的年份，我如何才能使函数：

将宏类别的颜色作为输入

统计该类别中值大于0的函数数

为函数指定x个颜色阴影

----编辑---

现在我已经创建了颜色比例，我需要根据其类别（对于宏颜色）和索引（对于宏颜色的阴影）为每个路径指定颜色。 我试了两件事，但都不管用

var greenRange = ["rgb(199,233,192)", "rgb(0,68,27)"];
var redRange = ["rgb(252,187,161)", "rgb(103,0,13)"];
var blueRange = ["rgb(198,219,239)", "rgb(8,48,107)"];

选项1

function draw () {

//(1) count the number of data points with value > in each category
var countFunzioni=0;
dataset.forEach (function (d) {if (d.categoria=="funzioni" && d.val2015>0) { countFunzioni += 1;}})

var countRimborso=0;
dataset.forEach (function (d) {if (d.categoria=="rimborso prestiti" && d.val2015>0) { countRimborso += 1;}})

var countAltro=0;
dataset.forEach (function (d) {if (d.categoria=="altro" && d.val2015>0) { countAltro += 1;}})

//(2) create a color method for each category based on a the count calculated above and the range I determined
var colorFunzioni = d3.scale.linear()
         .domain([0, countFunzioni])
         .range(redRange);

var colorRimborso = d3.scale.linear()
         .domain([0, countRimborso])
         .range(redRange); 

var colorAltro = d3.scale.linear()
         .domain([0, countAltro])
         .range(blueRange);

//draw the chart
chart = d3.select("#visualizationInner")
      .append("svg")
      .attr("id", "visualization")
      .attr("width", w)
      .attr("height", h)
      .append("g")
      .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

//draw and color the paths
var path = chart.datum(dataset).selectAll("path")
            .data(pie)
            .enter()
            .append("path")
            //(3) return the appropriate color method depending on the datum's category
            .attr("fill", function(d, i) {
              if (d.categoria=="funzioni") {return colorFunzioni(i);}
              else if (d.categoria=="rimborso prestiti") {return colorRimborso(i);}
              else if (d.categoria=="altro") {return colorAltro(i);}
            })
            .style("fill-opacity", 0.75)
            .attr("d", arc);
}

选项2

function draw () {

//(1) same as above

//(2) create a color method that adapts to each category's count and range
  var color = d3.scale.linear()
        .domain([0, function (d) {
          if (d.categoria=="funzioni") {return countFunzioni;}
          else if (d.categoria=="rimborso prestiti") {return countRimborso;}
          else if (d.categoria=="altro") {return countAltro;}
        }])
        .range(function (d) {
          if (d.categoria=="funzioni") {return greenRange;}
          else if (d.categoria=="rimborso prestiti") {return redRange;}
          else if (d.categoria=="altro") {return blueRange;}
        });

////(3) return the appropriate color method depending on the datum's category
        .attr("fill", function(d, i) {return color(i);}

---

}

选择一种颜色，选择浅色和深色，这将成为您的选择范围。然后，您的域是

[0，N]

colors。例如，对于绿色，我们可以：

var N=12；
var greenRange=['#cce0cc'，'#001e00']；
var color=d3.scale.linear（）
.domain（[0，N]）
.范围（绿色范围）；
d3.选择（'主体'）
.append（'div'））
.selectAll（“.color”）
.数据（d3.范围（N））
.输入（）
.append（'div'））
.attr（'class'，'color'）
.style（'height'，'50px'）
.style（'width'，'50px'）
.样式（“背景色”，功能（d，i）{
返回颜色（i）；
})

---

谢谢，这正是我所需要的，但现在我陷入了后续步骤。我编辑了上面的问题，有什么想法吗？