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，因为图表是从地图数据构建键/值对，而不是交叉过滤器数据：

.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');
})

你小提琴的叉子：https://jsfiddle.net/gordonwoodhull/7qb3yujj/14/

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

1 个答案: