D3: Как сделать шаблон обновления на нормализованной гистограмме?

Question

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

var aUtils = (function() { 
    function init(options) { 
    var defaults = {}; 
    options = $.extend(defaults, options); 

var margin = {top: 20, right: 20, bottom: 30, left: 40}; 

var containerWidth = $('.graph__container').width(), 
    containerHeight = $('.graph__container').height(), 
    width = containerWidth, 
    height = containerHeight; 

var svg = d3.select(".graph__container") 
      .append('svg'); 
svg.attr({ 
    'width' : width, 
    'height' : height 
}); 

var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var x = d3.scaleBand() 
      .rangeRound([0, width]) 
      .padding(0.1) 
      .align(0.1); 

var y = d3.scaleLinear() 
      .rangeRound([height, 0]); 

var z = d3.scaleOrdinal() 
      .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b"]); 

var stack = d3.stack() 
       .offset(d3.stackOffsetExpand); 

d3.csv("data.csv", type, function(error, data) { 
    if (error) throw error; 

    data.sort(function(a, b) { return b[data.columns[1]]/b.total - a[data.columns[1]]/a.total; }); 

    x.domain(data.map(function(d) { return d.etailer; })); 
    z.domain(data.columns.slice(1)); 

    var layer = g.selectAll(".layer") 
    .data(stack.keys(data.columns.slice(1))(data)) 
    .enter().append("g") 
     .attr("class", "layer") 
     .attr("fill", function(d) { return z(d.key); }); 

    layer.selectAll("rect") 
    .data(function(d) { return d; }) 
    .enter().append("rect") 
     .attr("x", function(d) { return x(d.data.etailer); }) 
     .attr("y", function(d) { return y(d[1]); }) 
     .attr("height", function(d) { return y(d[0]) - y(d[1]); }) 
     .attr("width", x.bandwidth()); 

    g.append("g") 
     .attr("class", "axis axis--x") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x)); 

    g.append("g") 
     .attr("class", "axis axis--y") 
     .call(d3.axisLeft(y).ticks(10, "%")); 

    var legend = layer.append("g") 
     .attr("class", "legend") 
     .attr("transform", function(d) { var d = d[d.length - 1]; return "translate(" + (x(d.data.etailer) + x.bandwidth()) + "," + ((y(d[0]) + y(d[1]))/2) + ")"; }); 

    legend.append("line") 
     .attr("x1", -6) 
     .attr("x2", 6) 
     .attr("stroke", "#000"); 

    legend.append("text") 
     .attr("x", 9) 
     .attr("dy", "0.35em") 
     .attr("fill", "#000") 
     .style("font", "10px sans-serif") 
     .text(function(d) { return d.key; }); 

}); 

function type(d, i, columns) { 
    for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]]; 
    d.total = t; 
    return d; 
} 
} 

return { 
    init : init 
} 
})(); 

$(document).ready(function() { 
    aUtils.init(); 
}); 

Мой файл CSV выглядит следующим образом:

category etailer brandname1 brandname 2 brandname 3 
air, amazon, 3, 4, 5 
air, walmart, 1, 2, 3 
air, target, 7, 8, 1 
wind, target, 3, 4, 5 
wind, walmart, 0, 9, 5 
wind, amazon, 3, 5, 8 

Прямо сейчас я могу получить его работу без колонки «категории», но как только я добавить категорию поэтому я могу начать работу над шаблоном обновления, весь график разбивается. Чтобы уточнить, я хочу, чтобы «etailer» был осью x, я хочу отображать разные категории отдельно на основе щелчка из списка выбора. Я не смог найти ни одного подобного примера в Интернете. Любое направление было бы высоко оценено!

Answer 1

Для исправления этой проблемы мне потребовались два основных изменения. Первое изменение функции типа этого:

function type(d, i, columns) { 
     for (i = 2, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]]; 
     d.total = t; 
     return d; 
    } 

Как вы можете видеть, я изменил = 1, для г = 2. Прежде, чем я сделал это изменение, функция пытается прочитать вторую колонку в виде номер.

Моя следующее изменение было фильтровать данные, используя эту функцию:

 categoryData = data.filter(function(d) { 
     return d.category === category; 
     }); 

Я не могу полностью объяснить, что это делает, он работал _ (ツ) _/¯

Я изменил эта линия:

 var serie = g.selectAll(".serie") 
     .data(stack.keys(data.columns.slice(2))(data)) 

Для этого:

 var serie = g.selectAll(".serie") 
     .data(stack.keys(data.columns.slice(2))(categoryData))