Обновление сгруппированного штрих-кода с новыми значениями

Question

Я пытаюсь расширить пример от dimple.js bars_vertical_grouped. Я хотел бы выбирать с помощью переключателей между значениями «Unit Sales» (как в примере) и «Sales Value» (мое расширение).

Поскольку я очень новичок в d3 и ямочке, я не могу понять, как обновить значения y при щелчке по радио. Насколько я понимаю, есть три вещи, чтобы изменить:

• выбранные значения должны быть объединены (сумма по «ценовой категории» и «Channel»)
• ось у должна изменяться в соответствии с новые значения
• агрегированные значения должны быть соизмеримы с новой оси у

Я пытаюсь обновить таблицу «на клик»:

function updateChart(){ // on click 
    var what = this.value; // value of radio-button 
    var newValues = null; // have to be aggregated and scaled    
    svg.selectAll("rect") 
     .data(data) 
     .transition().duration(400) 
     .attr('y', function(d) { d[what]; })     // ? 
     .attr('height', function(d) { y._scale(d[what]); }); // ? 
}; 

Редактировать: теперь рабочий пример - here.

Любая помощь приветствуется!

Answer 1

Здесь вы идете, я привел ваш пример и изменил его. Dimple может справиться с этим сам по себе, нет необходимости изменять формы в d3. Попробуйте использовать этот код в вашем примере:

<script type="text/javascript"> 
    var svg = dimple.newSvg("#chartContainer", 600, 450); 

    d3.tsv("/data/example_data.tsv", function (data) { 

     // Some constants 
     var marginLeft = 65; 
     marginTop = 60; 
     width = 510; 
     height = 330; 

     var myChart = new dimple.chart(svg, data); 
     myChart.setBounds(marginLeft, marginTop, width, height) 
     myChart.addCategoryAxis("x", ["Price Tier", "Channel"]); 

     var y = myChart.addMeasureAxis('y', 'Unit Sales'); // should/will be updated 
     myChart.addSeries("Channel", dimple.plot.bar); 
     myChart.addLegend(marginLeft, marginTop-25, width, 25, "right"); 
     myChart.draw(); 

     // on click update 
     d3.selectAll("input").on("click", updateChart); 

     function updateChart(){ 
      var what = this.value; 
      // Change the measure on the y axis 
      y.measure = what; 
      // Redraw the chart with a 1 second transition 
      myChart.draw(1000); 
     }; 
    }); 
</script> 

Я надеюсь, что это помогает

Джона