Question

我试图根据链接到键的某些属性来设置等值区的颜色。但是，设置颜色的所有方法只具有该特定位置的值，而不是其键。

var map = dc.geoChoroplethChart(dom)
  .height(width*0.8)
  .width(width)
  .dimension(dim)
  .projection(projection)
  .colorAccessor(function(d,i){
    // it isn't the usual d={key,value} but only d=value
  })
  .colorCalculator(function(d,i){
    // it isn't the usual d={key,value} but only d=value
    //and it's deprecated
  })
  .title(function (d) {return d.key + ': ' + d.value;})
  // got the key,value as expected

如何从colorAccessor获取密钥？它可以从其他功能（例如标题）中正常工作

Answer 1

所以事实证明它是“正常的”。正如Gordon所建议的那样，解决方案是将geojson的索引与您想要的数据进行映射。就我而言，我有关于国家/地区阵列上每个国家/地区的额外数据：

  var geojson=topojson.feature(europe,europe.objects.countries);
  // map index in the map to country data this hack is to solve a problem of not having the key on the colorAccessor
  var geo2data=[];
  geojson.features.forEach(function(d,i1){
    var i2=country.findIndex(function(c) {
      return c.country.toUpperCase()==d.id});
    geo2data[i1] = i2;
  });

  var map = dc.geoChoroplethChart(dom)
  ...
  .colorAccessor(function(v,i){
    if (geo2data[i] >= 0){
      //geo2data[i] contains extra values, eg 
      return v / country[geo2data[i]].threshold;
    }
    return v;
  })

Answer 2

我最终使用的解决方法：创建一个自定义reduce函数，该函数复制值中的键。

  //the iso code of the country is the key
  var group = dim.group().reduce(
    function (p, v) {
      p.total += +v.total;
      if (p.iso == "") {
        p.iso = v.country;
      }
      return p;
    },
    function (p, v) {
      p.total -= +v.total;
      return p;
    },
    function () { return {
       total:0,iso:""
      };
    });

 var map = dc.geoChoroplethChart(dom)
  .colorAccessor(function(d){
    if (!d || !d.value.iso) 
      return null; // area without data
    // now d.value.iso contains the key, and d.value.total contains the value
    return colorIndex(d.value.iso,d.value.total);// do magic
  })
  ....

根据键在等轴测中设置颜色

2 个答案: