D3.jsフィルタアップデートチャートを選択するdimple.js

Question

データをフィルタリングするためにドロップダウンメニューを選択する必要があります。しかし、ドロップダウンはクリックオプションのように機能するので、すぐにチャートをレンダリングします。

私が探しているのは、両方のドロップダウンから選択し、[送信]をクリックしてチャートをレンダリングすることです。

例はFIDDLEですが、地雷は単一選択ではなく複数になります。

私はブートストラップのドロップダウンを普通のHTMLと置き換えようとしていますが、私は運がなかったのです。

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">