Итерация по многомерному массиву с переменной длиной d3

Question

У меня есть многомерный массив целых значений, который я хочу использовать для создания гистограммы в d3.js. Улов состоит в том, что в определенной строке может быть переменное число значений. Для каждой строки я хочу создать прямоугольник с цветовой кодировкой на основе значения элемента. Кроме того, высота каждого прямоугольника зависит от того, сколько значений присутствуют в строке и в среднем значений в каждой строке

Пожалуйста увидеть, как граф должен выглядеть как здесь: переменной длиной гистограмма: http://i.stack.imgur.com/gYZAe.png

В на приведенном выше рисунке каждый столбец представляет значения в строке в многомерном массиве. Теперь проблема я лицо, что я не могу перебрать многомерный массив при выполнении следующих действий:

bar = svg.selectAll(".bar") 
.data(allrankings) 
.enter().append("rect") 

Примечания: allrankings является многомерным массивом.

В настоящее время я создаю еще один большой массив со всеми ранжированиями в одном измерении и итерацией по нему, сохраняя при этом отслеживание того, к какой строке принадлежит элемент. Есть ли лучший подход к этой проблеме?

Answer 1

Вы можете получить доступ к многомерным данным с помощью групп svg и нескольких вызовов .data. Вы можете больше узнать из учебника Майка Бостока по вложенным выборам: https://bost.ocks.org/mike/nest/#data

В вашем случае, если allrankings были многомерным массивом, например [[0,1,2,3], [2,3]], код может быть что-то вроде:

// process the data so the average and number of elements are visible to each bar 
var data = allrankings.map(function(rankings){ 
    var avg; 
    avg = rankings.reduce(function(a,b){ return a+b; })/rankings.length; 
    return rankings.map(function(d){ 
     return {val: d, avg: avg, numBars: rankings.length}; 
    }); 
}); 

var barGroups = svg.selectAll(".bar-groups") 
    .data(data) 
    .enter() 
    .append("g") 
    .attr("transform", function(d, i){ 
    return "translate("+ i*20 + ",0)"; // may want to use scales 
    }) 
    .classed("bar-groups",true); 

var bars = barGroups 
    .selectAll(".bars") 
    .data(function(d){ 
    return d; // returns a one dimensional array of objects 
    }) 
    .enter() 
    .append("rect"); 

, то вы можете присвоить значение через .avg, .val и свойства .numBars (например bars.attr("height", function(d){ return d.avg/d.numBars; });

Gilsha опубликовал хороший пример чего-то подобного, используемого в столбчатой ​​диаграмме на https://bl.ocks.org/mbostock/3886208