D3.js選擇過濾器更新圖表dimple.js

我必須從下拉菜單選擇過濾數據。它的效果很好，但是，由於下拉式工作像點擊選項，因此它會立即顯示圖表。D3.js選擇過濾器更新圖表dimple.js

我想要做的是從兩個下拉列表中選擇，然後單擊「提交」來渲染圖表。

這裏是一個例子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">

來源

2016-08-22 mtkilic

你是非常接近的。在回撥中您註冊了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">

來源

2016-08-22 21:53:41

太感謝你了！弗蘭克我是新手，我真的沒有想到那:) – mtkilic

D3.js選擇過濾器更新圖表dimple.js

回答

相關問題