Question

我在D3.js工作this pie-chart 这是数据：

DATA.JSON
[
{
"key":"amministrazione",
"categoria":"funzioni",
"val2015":404571081,
"val2013":374545999
},
{
"key":"sociale",
"categoria":"funzioni",
"val2015":235251679,
"val2013":258973653
},
{
"key":"territorio e ambiente",
"categoria":"funzioni",
"val2015":286164667,
"val2013":274949400
},
{
"key":"viabilità e trasporti",
"categoria":"funzioni",
"val2015":144185664,
"val2013":140619534
},
{
"key":"istruzione",
"categoria":"funzioni",
"val2015":168774925,
"val2013":170016208
},
{
"key":"cultura",
"categoria":"funzioni",
"val2015":55868045,
"val2013":55735535
},
{
"key":"sport",
"categoria":"funzioni",
"val2015":27219432,
"val2013":31244800
},
{
"key":"turismo",
"categoria":"funzioni",
"val2015":9544845,
"val2013":7674419
},
{
"key":"sviluppo economico",
"categoria":"funzioni",
"val2015":14790363,
"val2013":16635868
},
{
"key":"servizi produttivi",
"categoria":"funzioni",
"val2015":4334,
"val2013":4440
},
{
"key":"polizia locale",
"categoria":"funzioni",
"val2015":99007202,
"val2013":102065987
},
{
"key":"giustizia",
"categoria":"funzioni",
"val2015":12147068,
"val2013":12880138
},
{
"key":"anticipazioni di cassa",
"categoria":"rimborso prestiti",
"val2015":304323808,
"val2013":304323808
},
{
"key":"finanziamenti a breve termine",
"categoria":"rimborso prestiti",
"val2015":0,
"val2013":0
},
{
"key":"prestiti obbligazionari",
"categoria":"rimborso prestiti",
"val2015":38842996,
"val2013":36652213
},
{
"key":"quota capitale di debiti pluriennali",
"categoria":"rimborso prestiti",
"val2015":0,
"val2013":47152
},
{
"key":"quota capitale di mutui e prestiti",
"categoria":"rimborso prestiti",
"val2015":128508755,
"val2013":329885961
},
{
"key":"spese per conto terzi",
"categoria":"altro",
"val2015":232661261,
"val2013":236921438
},
{
"key":"disavanzo di amministrazione",
"categoria":"altro",
"val2015":0,
"val2013":0
}
]

它显示了政府预算如何分配给不同的职能（即“关键”）。给出每年的值（例如“val2015”，“val2013”），并且每个函数是宏类别的一部分（即“funzioni”，“rimborso prestiti”或“altro”）。

我正在尝试创建一个color（）函数，该函数根据以下内容动态更改其域和范围：

colorRange任意指定为域：greenRange为“funzioni”，redRange为“rimborso prestiti”，blueRange为“altro”
每个类别中具有正值的函数（“key”）的数量，从而忽略在给定年份内没有分配资源的函数。完成count（）函数（有效）
然后根据第2点的count（）函数为每个范围创建X个阴影
并为每个馅饼的楔子分配合适的颜色

这是我的出发点：

var greenRange = ["rgb(199,233,192)", "rgb(0,68,27)"]; //range for the first 12 wedges of the pie (assuming they are all >0)
var redRange = ["rgb(252,187,161)", "rgb(103,0,13)"]; //range for the following 5 wedges of the pie (same assumption)
var blueRange = ["rgb(198,219,239)", "rgb(8,48,107)"]; //range for the last 3 wedges of the pie (same assumption)

我尝试了两种选择，但都没有效果。

选项1

function draw () {

//(1) count the number of data points with value > 0 in each category - This works well!
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.data.categoria=="funzioni") {return colorFunzioni(i);}
              else if (d.data.categoria=="rimborso prestiti") {return colorRimborso(i);}
              else if (d.data.categoria=="altro") {return colorAltro(i);}
            })
            .style("fill-opacity", 0.75)
            .attr("d", arc);
}

返回此结果：

这很接近，但是它为前12个楔子指定了一系列红色（这应该取代了greenRange），并且与其他类别相关的楔子没有颜色

选项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.data.categoria=="funzioni") {return countFunzioni;}
          else if (d.data.categoria=="rimborso prestiti") {return countRimborso;}
          else if (d.data.categoria=="altro") {return countAltro;}
        }])
        .range(function (d) {
          if (d.cdata.ategoria=="funzioni") {return greenRange;}
          else if (d.data.categoria=="rimborso prestiti") {return redRange;}
          else if (d.data.categoria=="altro") {return blueRange;}
        });

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

这没有做任何着色。

知道如何解决这个问题吗？

Answer 1

选项1备注：

       .attr("fill", function(d, i) {
          if (d.data.categoria=="funzioni") {return colorFunzioni(i);}
          else if (d.data.categoria=="rimborso prestiti") {return colorRimborso(i);}
          else if (d.data.categoria=="altro") {return colorAltro(i);}
        })

问题在于上面写的好像是＆＃39; i＆＃39;将为这三个类别保留单独的标签。但事实并非如此，它会为您选择的所有元素保留一个索引，只要选项中的前12个项目完成，下一个项目就会超出您描述的任何比例范围并返回＆＃34;＃000000＆＃34; - 这就是为什么前12个是彩色的（前12个可能是红色的，因为你将红色范围指定为两个刻度，并且绿色范围不被使用），其余的不是。

作为一个快速解决方案，请在数据本身中记录每个类别中出现的位置，如下所示：

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

为每个类别执行此操作

然后在fill attr函数中执行：

else if (d.data.categoria=="altro") {return colorAltro(d.data.catIndex);}

再次为每个类别做了所需。

作为一个单独的东西，你可以通过分配这样的颜色来摆脱其他 - 如果：

var colorMap = {
    funzioni: colorFunzioni, 
    altro: colorAltro, 
    "rimborso prestiti": colorRimborso
}

然后再做

       .attr("fill", function(d, i) {
          var scale = colorMap[d.data.categoria];
          if (scale) return scale(d.data.catIndex)
        })

D3.js创建一个动态color（）函数

1 个答案: