Question

<select  id="cs" name="cs" >
    <option value = "HIV+TB" >HIV+TB</option>
    <option value = "TB">TB</option>
</select>
<button id="btn">Click Me</button>

<div id="chartContainer">
<script type="text/javascript">
    var dropdown = d3.select("#cs")
    var cs2 = dropdown.node().options[dropdown.node().selectedIndex].value;
    d3.csv("test.csv", function (data) {
    var svg = dimple.newSvg("#chartContainer", 590, 600);
    var myChart = new dimple.chart(svg, data1990);
    myChart.setBounds(105, 25, 475, 465)
    myChart.showGridlines = true;
    myChart.addCategoryAxis("x", ["measure","sex","year"]);
    myChart.addCategoryAxis("y", "age_name");
    var z = myChart.addMeasureAxis("z", "rt_mean");
    var s = myChart.addSeries("sex", dimple.plot.bubble);
    s.aggregate = dimple.aggregateMethod.max;
    myChart.addLegend(240, 10, 330, 20, "right");
    myChart.draw();
    d3.select("#btn").on("click", function() {
            myChart.data = data.filter(function(d) { return d.cause_short == cs2; });
            myChart.draw(1000);
            });
    });
</script>

问题是除了现有代码之外，代码还想添加新图表。单击新选项后如何更新图表。

Answer 1

以下是单击按钮时使用随机数重绘图表的示例。希望这会给你足够的工作：

var svg = dimple.newSvg("#chartContainer", 590, 400);
var data = [
    { Animal: "Cats", Value: (Math.random() * 1000000) },
    { Animal: "Dogs", Value: (Math.random() * 1000000) },
    { Animal: "Mice", Value: (Math.random() * 1000000) }
];

var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "Animal"); 
x.addOrderRule(["Cats", "Dogs", "Mice"]);
myChart.addMeasureAxis("y", "Value");
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();

d3.select("#btn").on("click", function() {
    myChart.data = [
        { Animal: "Cats", Value: (Math.random() * 1000000) },
        { Animal: "Dogs", Value: (Math.random() * 1000000) },
        { Animal: "Mice", Value: (Math.random() * 1000000) }
    ];
    myChart.draw(1000);
});

这是一个有效的例子：

http://jsfiddle.net/nf57j/

选择新选项时更新dimple.js图表

1 个答案: