geoChoroplethChart 为黑色，一键有两个值选项

Question

我有下一个数据使用 dc.js 和 geoChoroplethChart，

var data = crossfilter([
{ state: 'one', bar: 'A', num: '1' },
{ state: 'two', bar: 'B', num: '2' },
{ state: 'three', bar: 'A', num: '3' },
{ state: 'one', bar: 'B', num: '3' },
{ state: 'one', bar: 'A', num: '2' },
{ state: 'two', bar: 'B', num: '2' },
]);


var statedim=data.dimension(function(d){return d['state'];})
var my_group=statedim.group();

reducer=reductio();
reducer.value('nbar').exception(function(d){return d['bar']}.exceptionCount(true);
reducer.value('nnum').exception(function(d){return d['num']}.exceptionCount(true);


reducer(my_group);

其中state是我国家的一个地区，颜色是基于nnum的，所以我使用

.valueAccessor(function (d) {return d.value.nnum.exceptionCount})

但我希望它在标题出现状态下，nnum和nbar。

.title(function(d){
return["state: " +d.key,
"#nnum: "+d.value].join('\n')})

但我不知道如何在没有 geoChoroplethChart 的标题中集成 nbar。

我觉得在用

.valueAccessor(function (d) {return d.value})

.title(function(d){
return["state: " +d.key,
"#nnum: "+d.value.nnum.exceptionCount,
"nbar:" +d.value.nbar.exceptionCount].join('\n')})

是标题的解决方案，但是状态填满黑色，当我点击另一个图形时，地图没有反应。

Answer 1

geoChoropleth 处理数据的方式确实很奇怪。所有其他图表将交叉过滤器数据绑定到 SVG； geoChoropleth binds the map data and hides the crossfilter data in an internal object。然后它为访问者伪造绑定数据。

此外，正如您所指出的，它将 valueAccessor() 的结果存储在其隐藏数据中，而不是绑定原始数据然后在需要时使用 valueAccessor。我很确定这是个坏主意。

但抱怨够了。让我们像往常一样找到解决方法。

事实证明，您无需深入了解值访问器即可获得正确的颜色。您可以保留 valueAccessor 默认值，它将获取 d.value。然后使用 colorAccessor 获得正确的颜色：

.colorAccessor(function(d){
  return d ? d.nbar.exceptionCount : null;
})

注意对未定义数据的防范，这是同样奇怪的结果。

我们还需要防止标题访问器中出现未定义的 value，因为图表是根据地图数据而不是交叉过滤器数据构建 key/value 对：

.title(function(d){
  var arr = ["state: " + d.key];
  if(d.value) // have to guard against null data for "other" states
    arr.push(
     "#nnum: "+d.value.nnum.exceptionCount,
     "nbar:" +d.value.nbar.exceptionCount
    );
  return arr.join('\n');
})

你的 fiddle 分支：https://jsfiddle.net/gordonwoodhull/7qb3yujj/14/

geoChoroplethChart 为黑色，一键有两个值选项

geoChoroplethChart is black with two option of value for one key

crossfilter

dc.js

reductio