从下拉菜单中选择:解决方案后，酒窝覆盖了新的情节

Question

我想使用下拉菜单更新一个交互式散点图在酒窝，但是我有一些问题与此任务。下面是我的代码示例:

<select name="xAX" id="xAX">
        <option value ="Distance">Distance</option>
        <option value ="Redshift">Redshift</option>
    </select>
        <div id ="chartContainer">
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
        <script type="text/javascript">
            var dropdown = d3.select("#xAX")
            var xAX2 = dropdown.node().options[dropdown.node().selectedIndex].value;
               d3.csv("tabula.csv", function(data) {
                      dataset = data.map(function(data) { return [
                                                                  data["Object"],
                                                                  +data["Redshift"],
                                                                  +data["Distance"],
                                                                  +data["Scale"],
                                                                  data["Type"],
                                                                  +data["IRAS12um"] ]; });
                      },

                 var svg = dimple.newSvg("#chartContainer", 900, 900);
                var myChart = new dimple.chart(svg, data);
                      myChart.setBounds(100, 180, 730, 550)
                      myChart.showGridlines = true;
                      var x = myChart.addMeasureAxis("x", ["Redshift","Distance"]);
                                x.addOrderRule(["Redshift","Distance"]);
                      myChart.addMeasureAxis("y", "Redshift");
                      myChart.addMeasureAxis("z", "IRAS12um");
                      myChart.addSeries("Type", dimple.plot.bubble);
                      myChart.addLegend(70, 10, 610, 80, "right");
                      myChart.draw();
                      d3.select("#xAX").on("change", change)
                        function change() {
                        this.options[this.selectedIndex].value
                        }
                            myChart.draw(1000);
            });

" table .csv"表有X个头，每个头有Y个元素。我希望x轴和/或y轴有任何可能的x标头选项。

我试过这个例子，但它并没有真正使我想要的。任何关于代码或其他示例的帮助将非常有帮助。

----- UPDATE ----

我更新了代码，我可以从下拉菜单中更改情节。然而，新图表是绘制在旧图表之上的。如何将旧地块移除?

    <h2>X-Axis</h>
    <select id="xAX" name="xAX">
        <option value ="Distance" selected>Distance</option>
        <option value ="Redshift">Redshift</option>
    </select>
    <div id="chartContainer">
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
        <script type="text/javascript">
        var svg = dimple.newSvg("#chartContainer", 900, 900);
        var dropdown = d3.select("#xAX")
        var change = function() {
        var source = dropdown.node().options[dropdown.node().selectedIndex].value;
               d3.csv("tabula.csv", function(data) {
                var myChart = new dimple.chart(svg, data);
                      myChart.setBounds(100, 180, 730, 550)
                      var x = myChart.addMeasureAxis("x", source);
                      myChart.addMeasureAxis("y", "Redshift");
                      myChart.addMeasureAxis("z", "IRAS12um");
                      myChart.addSeries("Type", dimple.plot.bubble);
                      myChart.addLegend(70, 10, 610, 80, "right");
                      myChart.draw();
                      });
        }
        dropdown.on("change", change);
        change();
        </script>

Answer 1

试试这样:

<h2>X-Axis</h>
    <select id="xAX" name="xAX">
        <option value ="Distance" selected>Distance</option>
        <option value ="Redshift">Redshift</option>
    </select>
    <div id="chartContainer">
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
        <script type="text/javascript">
        var svg = dimple.newSvg("#chartContainer", 900, 900);
        var dropdown = d3.select("#xAX")
        var xAxis;
        var myChart;
        var draw = function() {
               var source = dropdown.node().options[dropdown.node().selectedIndex].value;
               d3.csv("tabula.csv", function(data) {
                      myChart = new dimple.chart(svg, data);
                      myChart.setBounds(100, 180, 730, 550)
                      xAxis = myChart.addMeasureAxis("x", source);
                      myChart.addMeasureAxis("y", "Redshift");
                      myChart.addMeasureAxis("z", "IRAS12um");
                      myChart.addSeries("Type", dimple.plot.bubble);
                      myChart.addLegend(70, 10, 610, 80, "right");
                      myChart.draw();
                      });
        }
        var change = function() {
            var source = dropdown.node().options[dropdown.node().selectedIndex].value;
            xAxis.categoryFields = source;
            myChart.draw();
        };
        dropdown.on("change", change);
        draw();
        </script>

如果你在myChart中添加延迟，这将使你不必删除原始svg对象。画(800,假);在change函数中，它将使更改变成动画