多值变量的热图

Question

我正在使用dc.js主API创建热图。我的例子基于this。但主要区别在于行和列具有多值。

以下是CSV格式的数据集：

id,city,visitor,animals,food
1,NYC,854,"Lion,Tiger,Rabbit,Ape,Zebra,Monkey,Elephant,Horse","Apple,Banana,Chicken,Egg,Fish,Grape,Ham,Ice,Juice"
2,LAX,123,"Cat,Tiger,Rabbit,Ape,Whale,Bear,Zebra,Donkey,Goat,Turtle","Apple,Banana,Cake,Fish,Sugar,Bamboo,Leaf,Ham,Ice,Water"
3,LON,584,"Lion,Tiger,Ape,Shark,Panda,Zebra,Deer,Turtle,Bear,","Apple,Coke,Cake,Fish,Bamboo,Water,Grape,Orange"
4,TOR,704,"Cat,Rabbit,Ape,Whale,Bear,Panda,Donkey,Turtle,Cheetah","Banana,Cake,Orange,Kiwi,Sugar,Bamboo,Leaf,Goat,Ice,Juice"
5,SFO,855,"Lion,Tiger,Ape,Zebra,Monkey,Elephant,Donkey,Goat,Turtle,Cheetah","Apple,Cake,Grape,Ham,Juice,Hay"
6,DAL,654,"Salmon,Penguin,Rabbit,Ape,Whale,Goat,Tortoise","Apple,Banana,Cake,Ice,Water,Earthworm"

每种动物和食物都有多种价值。行以食物为基础，柱子以动物为基础。我能够创建热图，但没有与其他图表的交互。例如，如果我可以单击某个框，则条形图中没有任何操作。在控制台找到的错误消息是“Uncaught TypeError：无法读取属性'all'的undefined。”这是代码。

parsecsv = function (string) {
    var rows = d3.csv.parse(string);
    var records = [];
    rows.forEach(function (d, i) {
        d.animals= d.animals.split(/,/);
        d.food = d.food.split(/,/);
        records.push(d)
    });
    return records
};

var chartGroup = "chartGroup";
var heatmapChart = dc.heatMap("#heatmap", chartGroup);
var pieChart1 = dc.pieChart("#piechart1", chartGroup);
var pieChart2 = dc.pieChart("#piechart2", chartGroup);  
var barChart = dc.barChart("#barchart", chartGroup);


var ndx  = crossfilter(parsecsv(csvtext));
console.log(ndx);
var animals_food_dim = ndx.dimension(function(d) { console.log (d.animals);return [d.animals, d.food]; });
var animals_food_group = animals_food_dim.groupAll().reduce(reduceAdd, reduceRemove, reduceInitial).value();

function reduceAdd(p, v) {      
    // skip empty values
  if (v.animals[0] === "" || v.food[0]==="") return p;  
  v.animals.forEach (function(val1, idx1) {
    v.food.forEach (function(val2, idx2) {
        var temp_array=[val1,val2];
        p[temp_array] = (p[temp_array] || 0) + 1; //increment counts
        //console.log(val1+":"+val2, p[temp_array],temp_array);     
    });
  });
  return p;
}

function reduceRemove(p, v) {
  if (v.animals[0] === "") return p;    // skip empty values
  v.animals.forEach (function(val1, idx1) {
    v.food.forEach (function(val2, idx2) {
    var temp_array=[val1,val2];
    p[temp_array] = (p[temp_array] || 0) - 1; //increment counts
    //console.log(val1+":"+val2,p[temp_array]);     
    });
  });
  return p;  
}

function reduceInitial() {
  return {};  
}

animals_food_group.all = function() {
  var newObject = [];
  for (var key in this) {
     if (this.hasOwnProperty(key) && key != "all" && key != "top") {
        var temp_array=[key.substring(0,key.indexOf(",")),key.substring(key.indexOf(",")+1)];
        //console.log(temp_array,this[temp_array]);
        newObject.push({
            key: temp_array,
            value: this[temp_array]
        });
     }
  }
  return newObject;
};

animals_food_group.top = function(count) {
     var newObject = this.all();
    newObject.sort(function(a, b){return b.value - a.value});
     return newObject.slice(0, count);
};  

heatmapChart
    .width(12 * 80 + 80)
    .height(27 * 10 + 40)
    .dimension(animals_food_dim)
    .group(animals_food_group)
    .keyAccessor(function(d) {return d.key[0];})
    .valueAccessor(function(d)  {return d.key[1];})             
    .colorAccessor(function(d) {return +d.value;})
    .linearColors(["#FFEAEA", "#FF0000"])
    .title(function(d) {
      return "Animals:   " + d.key[0] + "\n" +
             "Food:  " + d.key[1] + "\n" +
             "Count: " + ( d.value) + " ";})        
    .calculateColorDomain();    

heatmapChart.render();

var city_dim = ndx.dimension(function(d) {return d.city; });
var city_group = city_dim.group().reduceSum(function(d) {return +d.visitor;});
barChart
    .dimension(city_dim)
    .group(city_group)
    .width(12 * 80 + 80)
    .height(480)
    .elasticY(true)
    .x(d3.scale.ordinal().domain(["NYC","LAX","LON","TOR","SFO","DAL"]))
    .xUnits(dc.units.ordinal) 
    .elasticY(true)
    .centerBar(false)
    .xAxisPadding(50);
barChart.render();

我打赌我必须在reduceAdd，reduceRemove和/或animals_food_group.all中做错了。有人会帮我解决交互问题吗？

JSFiddle是http://jsfiddle.net/chitester11/u33yb8k5/。