D3.js select 过滤器更新图表 dimple.js

Question

我必须从下拉菜单 selection 中过滤数据。它工作得很好；但是，由于下拉菜单像点击选项一样工作，它会立即呈现图表。

我想要做的是从两个下拉列表中 select，然后单击 "Submit" 以呈现图表。

这是一个例子 FIDDLE 但我的是多个而不是单个 selection。

我尝试用普通 HTML 替换我的 bootstrap 下拉菜单，但是我没有运气。

var svg = dimple.newSvg("#chartContainer", 590, 400);

var data = [
    { h: 1, "Letter": "a", "Value": 1, "year": 2011},
    { h: 1, "Letter": "b", "Value": 2, "year": 2011},
    { h: 1, "Letter": "c", "Value": 3, "year": 2012},
    { h: 2, "Letter": "a", "Value": 10, "year": 2012},
    { h: 2, "Letter": "b", "Value": 10, "year": 2013},
    { h: 2, "Letter": "c", "Value": 30, "year": 2013}
];

function getData(data, year, letter) {
    var extData = [];
    for(var i = 0; i < data.length; i++) {
        if (year != null && data[i]["year"] != year)
            continue;
        if (letter != null && data[i]["Letter"] != letter)
            continue;
        extData.push(data[i])
    }
    return extData
}

var myChart = new dimple.chart(svg, getData(data,"2012"));
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "year"); 
myChart.addMeasureAxis("y", "Value");
var s = myChart.addSeries(["Letter"], dimple.plot.bubble);
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();

//Second chart
var svg2 = dimple.newSvg("#chartContainer2", 590, 400);
var data2 = [
    { h: 1, "Letter": "a", "Value": 1, "year": 2011},
    { h: 1, "Letter": "b", "Value": 2, "year": 2011},
    { h: 1, "Letter": "c", "Value": 3, "year": 2012},
    { h: 2, "Letter": "a", "Value": 10, "year": 2012},
    { h: 2, "Letter": "b", "Value": 10, "year": 2013},
    { h: 2, "Letter": "c", "Value": 30, "year": 2013}
];

var myChart2 = new dimple.chart(svg2, data2);
myChart2.setBounds(60, 30, 510, 305)
var x = myChart2.addCategoryAxis("x", "h");
myChart2.addMeasureAxis("y", "Value");
var s = myChart2.addSeries(["Letter"], dimple.plot.bar);
myChart2.addLegend(60, 10, 510, 20, "right");

var year = null;
var letter = null;

function chartsUpdate() {
    myChart.data = getData(data, year, letter);
    myChart.draw(500);
    myChart2.data = getData(data2, year, letter);
    myChart2.draw(500);
}

myChart2.draw();
d3.selectAll('.dropdown-submenu.year > a').on("click", function(d) {
    year = this.text;
    chartsUpdate();
});

d3.selectAll('.dropdown-submenu.letter > a').on("click", function(d) {
    letter = this.text;
    chartsUpdate();
});

    <script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.1.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
        Select Year <span class="caret"></span>
    </a>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
        <li class="dropdown-submenu year">
           <a tabindex="-1" href="#" >2011</a>
       </li>
       <li class="dropdown-submenu year">
           <a tabindex="-1" href="#" >2012</a>
       </li>
       <li class="dropdown-submenu year">
           <a tabindex="-1" href="#" >2013</a>
       </li>
   </ul>
</div>
<div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
        Select Letter <span class="caret"></span>
    </a>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
        <li class="dropdown-submenu letter">
           <a tabindex="-1" href="#" >a</a>
       </li>
       <li class="dropdown-submenu letter">
           <a tabindex="-1" href="#" >b</a>
       </li>
       <li class="dropdown-submenu letter">
           <a tabindex="-1" href="#" >c</a>
       </li>
   </ul>
</div>
<div id="chartContainer2"  style="float:left;width:48%;"></div>  
<div id="chartContainer">

Answer 1

你们非常亲密。在您为 d3.selectAll('.dropdown-submenu.year > a').on("click") 注册的回调中，您调用了 chartsUpdate。这意味着您每次单击下拉菜单时都会更新图表。我删除了这些调用并添加了一个提交按钮，单击时调用 chartsUpdate。

var svg = dimple.newSvg("#chartContainer", 590, 400);

var data = [
    { h: 1, "Letter": "a", "Value": 1, "year": 2011},
    { h: 1, "Letter": "b", "Value": 2, "year": 2011},
    { h: 1, "Letter": "c", "Value": 3, "year": 2012},
    { h: 2, "Letter": "a", "Value": 10, "year": 2012},
    { h: 2, "Letter": "b", "Value": 10, "year": 2013},
    { h: 2, "Letter": "c", "Value": 30, "year": 2013}
];

function getData(data, year, letter) {
    var extData = [];
    for(var i = 0; i < data.length; i++) {
        if (year != null && data[i]["year"] != year)
            continue;
        if (letter != null && data[i]["Letter"] != letter)
            continue;
        extData.push(data[i])
    }
    return extData
}

var myChart = new dimple.chart(svg, getData(data,"2012"));
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "year"); 
myChart.addMeasureAxis("y", "Value");
var s = myChart.addSeries(["Letter"], dimple.plot.bubble);
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();

//Second chart
var svg2 = dimple.newSvg("#chartContainer2", 590, 400);
var data2 = [
    { h: 1, "Letter": "a", "Value": 1, "year": 2011},
    { h: 1, "Letter": "b", "Value": 2, "year": 2011},
    { h: 1, "Letter": "c", "Value": 3, "year": 2012},
    { h: 2, "Letter": "a", "Value": 10, "year": 2012},
    { h: 2, "Letter": "b", "Value": 10, "year": 2013},
    { h: 2, "Letter": "c", "Value": 30, "year": 2013}
];

var myChart2 = new dimple.chart(svg2, data2);
myChart2.setBounds(60, 30, 510, 305)
var x = myChart2.addCategoryAxis("x", "h");
myChart2.addMeasureAxis("y", "Value");
var s = myChart2.addSeries(["Letter"], dimple.plot.bar);
myChart2.addLegend(60, 10, 510, 20, "right");

var year = null;
var letter = null;

function chartsUpdate() {
    myChart.data = getData(data, year, letter);
    myChart.draw(500);
    myChart2.data = getData(data2, year, letter);
    myChart2.draw(500);
}

myChart2.draw();
d3.selectAll('.dropdown-submenu.year > a').on("click", function(d) {
    year = this.text;
    // chartsUpdate();
});

d3.selectAll('.dropdown-submenu.letter > a').on("click", function(d) {
    letter = this.text;
    // chartsUpdate();
});

/* Added */
$('#filter').click(chartsUpdate);

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.1.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
        Select Year <span class="caret"></span>
    </a>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
        <li class="dropdown-submenu year">
           <a tabindex="-1" href="#" >2011</a>
       </li>
       <li class="dropdown-submenu year">
           <a tabindex="-1" href="#" >2012</a>
       </li>
       <li class="dropdown-submenu year">
           <a tabindex="-1" href="#" >2013</a>
       </li>
   </ul>
</div>
<div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
        Select Letter <span class="caret"></span>
    </a>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
        <li class="dropdown-submenu letter">
           <a tabindex="-1" href="#" >a</a>
       </li>
       <li class="dropdown-submenu letter">
           <a tabindex="-1" href="#" >b</a>
       </li>
       <li class="dropdown-submenu letter">
           <a tabindex="-1" href="#" >c</a>
       </li>
   </ul>
</div>

<!-- Added -->
<button type="button" id="filter">Filter</button>
<!-- -->

<div id="chartContainer2"  style="float:left;width:48%;"></div>  
<div id="chartContainer">

D3.js select 过滤器更新图表 dimple.js

D3.js select filter update chart dimple.js

html

javascript

jquery

d3.js

dimple.js