代码之家 › 专栏 › 技术社区 › aey

地质剖面图为黑色,一个键有两个值选项

reductio crossfilter dc.js

aey · 技术社区 · 8 年前

我有下一个数据与dc一起工作。js和地球化学图,

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);

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

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

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

但我不知道如何在标题中整合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')})

这是标题的解决方案,但州填充为黑色,当我单击另一个图形时,地图没有反应。

1 回复 | 直到 8 年前

Gordon 8 年前

geoChoropleth binds the map data and hides the crossfilter data in an internal object 。然后它为访问者伪造绑定数据。

此外,正如您所指出的,它存储了 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/