Question

我尝试从dimple.js bars_vertical_grouped扩展示例。我想选择“单位销售”（如示例中）和“销售价值”（我的扩展名）之间的单选按钮。

由于我对d3和dimple很陌生，所以当点击无线电时，我无法弄清楚如何更新y值。据我了解，有三件事需要改变：

必须汇总所选择的值（总和'Price Tier'和'Channel'）
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]); }); // ?
};

编辑：一个现在正在运作的例子是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>

我希望这会有所帮助

约翰

使用新值更新分组条形图

1 个答案: