Javascript 使用新值更新分组条形图

我尝试从dimple.js扩展这个示例。我想用单选按钮在“单位销售额”（如示例所示）和“销售额”（我的扩展名）之间进行选择

因为我对d3和dimple非常陌生，所以当点击收音机时，我不知道如何更新y值。据我所知，有三件事需要改变：

• 必须对所选值进行聚合（在“价格层”和“渠道”上求和）
• y轴必须根据新值进行更改
• 聚合值必须缩放到新的y轴

我尝试“单击”更新图表：

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]); }); // ?
};

编辑：下面是一个正在工作的示例

---

感谢您的帮助

给你，我以你为例修改了它。酒窝可以自行处理，不需要修改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>

var svg=dimple.newSvg（“#chartContainer”，600450）；
d3.tsv（“/data/example_data.tsv”），函数（数据）{
//一些常数
var marginLeft=65；
marginTop=60；
宽度=510；
高度=330；
var myChart=new dimple.chart（svg，数据）；
myChart.setBounds（边缘左侧、边缘顶部、宽度、高度）
myChart.addCategoryAxis（“x”，“价格层”，“渠道”）；
var y=myChart.addMeasureAxis（'y'，'unitsales'）；//应该/将被更新
myChart.addSeries（“通道”、酒窝、绘图、条形图）；
myChart.addLegend（左侧边缘，右侧边缘，宽度25）；
myChart.draw（）；
//单击“更新”
d3.选择全部（“输入”）。单击（“单击”，更新开始）；
函数updateChart（）{
var what=该值；
//更改y轴上的测量值
y、 度量=什么；
//用1秒的过渡重新绘制图表
我的图表绘制（1000）；
};
});

我希望这有帮助

---

约翰

给你，我以你为例修改了它。酒窝可以自行处理，不需要修改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>

var svg=dimple.newSvg（“#chartContainer”，600450）；
d3.tsv（“/data/example_data.tsv”），函数（数据）{
//一些常数
var marginLeft=65；
marginTop=60；
宽度=510；
高度=330；
var myChart=new dimple.chart（svg，数据）；
myChart.setBounds（边缘左侧、边缘顶部、宽度、高度）
myChart.addCategoryAxis（“x”，“价格层”，“渠道”）；
var y=myChart.addMeasureAxis（'y'，'unitsales'）；//应该/将被更新
myChart.addSeries（“通道”、酒窝、绘图、条形图）；
myChart.addLegend（左侧边缘，右侧边缘，宽度25）；
myChart.draw（）；
//单击“更新”
d3.选择全部（“输入”）。单击（“单击”，更新开始）；
函数updateChart（）{
var what=该值；
//更改y轴上的测量值
y、 度量=什么；
//用1秒的过渡重新绘制图表
我的图表绘制（1000）；
};
});

我希望这有帮助

---

约翰

谢谢你，约翰！酒窝很棒：）谢谢你，我很高兴你喜欢它。我对上面的例子做了一点修改，直接更改了轴的测量值，没有理由使用via series的原始方法。谢谢John！酒窝很棒：）谢谢你，我很高兴你喜欢它。我对上面的例子做了一点修改，直接更改了轴的测量值，没有充分的理由使用via series的原始方法。