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

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

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

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

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

Примечание: allrankings-многомерный массив.

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

1 ответ

  1. Доступ к многомерным данным можно получить с помощью групп svg и multiple .вызовы данных. Вы можете прочитать больше из учебника Майка Бостока по вложенным выборкам: 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");
    

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

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