Dimple.js當選擇下拉條件時更新圖表

Question

我是D3.js和酒窩的新手。我一直在爲Dimple.js圖表​​工作幾周。直到現在，酒窩爲我工作的很好。我正在爲圖表創建過濾標準。所以我用引導來創建下拉菜單。

我創建例如Here什麼，我試圖實現，在「大陸」下拉菜單中，如果我選擇歐洲或中東，我只想看到有相關的數據圖表。

d3.select("#btn").on("click", function(){ 
myChart.data = [ 

     {"Point":"Turkey","Population":75.01,"Year":2013,"Percent":1.689,"continent":"Middle East"}, 
{"Point":"Iran","Population":77.15,"Year":2013,"Percent":0.689,"continent":"Middle East"}, 
{"Point":"Israel","Population":8.05,"Year":2013,"Percent":2.689,"continent":"Middle East"}, 
{"Point":"Egypt","Population":87.61,"Year":2013,"Percent":0.689,"continent":"Middle East"}, 
{"Point":"Jordan","Population":6.46,"Year":2013,"Percent":3.689,"continent":"Middle East"}, 
{"Point":"Turkey","Population":63.24,"Year":2000,"Percent":0.689,"continent":"Middle East"}, 
{"Point":"Iran","Population":65.85,"Year":2000,"Percent":3.689,"continent":"Middle East"}, 
{"Point":"Israel","Population":6.28,"Year":2000,"Percent":0.689,"continent":"Middle East"}, 
{"Point":"Egypt","Population":68.33,"Year":2000,"Percent":0.689,"continent":"Middle East"}, 
{"Point":"Jordan","Population":4.79,"Year":2000,"Percent":0.689,"continent":"Middle East"}]; 

我知道如果我將數據分成兩個，並給每個ID在d3.select("#btn")，在我的HTML。它會工作，但這不是我正在尋找的。

我會很感激任何幫助和建議。

Answer 1

參考here

不乾淨，可以修改。查看參考資料以獲得更好的理解

var svg = dimple.newSvg("#chartContainer", 570, 400); 
 
var data = [ 
 
    {"Point":"France","Population":65.92,"Year":2013,"Percent":1.689,"continent":"Europe"}, 
 
    {"Point":"Germany","Population":82.13,"Year":2013,"Percent":0.689,"continent":"Europe"}, 
 
    {"Point":"Italy","Population":60.23,"Year":2013,"Percent":2.689,"continent":"Europe"}, 
 
    {"Point":"Greece","Population":10.96,"Year":2013,"Percent":0.689,"continent":"Europe"}, 
 
    {"Point":"Belgium","Population":11.18,"Year":2013,"Percent":3.689,"continent":"Europe"}, 
 
    {"Point":"France","Population":60.91,"Year":2000,"Percent":0.689,"continent":"Europe"}, 
 
    {"Point":"Germany","Population":82.21,"Year":2000,"Percent":3.689,"continent":"Europe"}, 
 
    {"Point":"Italy","Population":56.94,"Year":2000,"Percent":0.689,"continent":"Europe"}, 
 
    {"Point":"Greece","Population":10.80,"Year":2000,"Percent":0.689,"continent":"Europe"}, 
 
    {"Point":"Belgium","Population":10.25,"Year":2000,"Percent":0.689,"continent":"Europe"}, 
 
    
 
    {"Point":"Turkey","Population":75.01,"Year":2013,"Percent":1.689,"continent":"Middle East"}, 
 
    {"Point":"Iran","Population":77.15,"Year":2013,"Percent":0.689,"continent":"Middle East"}, 
 
    {"Point":"Israel","Population":8.05,"Year":2013,"Percent":2.689,"continent":"Middle East"}, 
 
    {"Point":"Egypt","Population":87.61,"Year":2013,"Percent":0.689,"continent":"Middle East"}, 
 
    {"Point":"Jordan","Population":6.46,"Year":2013,"Percent":3.689,"continent":"Middle East"}, 
 
    {"Point":"Turkey","Population":63.24,"Year":2000,"Percent":0.689,"continent":"Middle East"}, 
 
    {"Point":"Iran","Population":65.85,"Year":2000,"Percent":3.689,"continent":"Middle East"}, 
 
    {"Point":"Israel","Population":6.28,"Year":2000,"Percent":0.689,"continent":"Middle East"}, 
 
    {"Point":"Egypt","Population":68.33,"Year":2000,"Percent":0.689,"continent":"Middle East"}, 
 
    {"Point":"Jordan","Population":4.79,"Year":2000,"Percent":0.689,"continent":"Middle East"}]; 
 

 

 
function getData(data, key) { 
 
\t var extData = []; 
 
\t if(key == "") 
 
\t { 
 
\t \t return data; 
 
\t } 
 
\t for(var i = 0; i < data.length; i++) { 
 
\t \t if(data[i]["continent"] == key) { 
 
\t \t \t extData.push(data[i]) 
 
\t \t } 
 
\t } 
 
\t return extData 
 
} \t 
 
var myChart = new dimple.chart(svg, getData(data,"")); 
 
    
 
var x = myChart.addCategoryAxis("x", ["Point","Year"]); 
 
     
 
var y = myChart.addMeasureAxis("y", "Population"); 
 
var series1 = myChart.addSeries("Point", dimple.plot.bar); 
 
x.showGridlines = true; 
 
x.addOrderRule("Date"); 
 

 

 
var myLegend = myChart.addLegend(530, 100, 60, 300, "Right"); 
 
myChart.draw(); 
 

 
     // This is a critical step. By doing this we orphan the legend. This 
 
     // means it will not respond to graph updates. Without this the legend 
 
     // will redraw when the chart refreshes removing the unchecked item and 
 
     // also dropping the events we define below. 
 
     myChart.legends = []; 
 

 
     // This block simply adds the legend title. I put it into a d3 data 
 
     // object to split it onto 2 lines. This technique works with any 
 
     // number of lines, it isn't dimple specific. 
 
     svg.selectAll("title_text") 
 
      .data(["Click legend to","show/hide owners:"]) 
 
      .enter() 
 
      .append("text") 
 
      .attr("x", 499) 
 
      .attr("y", function (d, i) { return 80 + i * 14; }) 
 
      .style("font-family", "sans-serif") 
 
      .style("font-size", "10px") 
 
      .style("color", "Black") 
 
      .text(function (d) { return d; }); 
 

 
     // Get a unique list of Owner values to use when filtering 
 
     var filterValues = dimple.getUniqueValues(data, "Point"); 
 
     // Get all the rectangles from our now orphaned legend 
 
     myLegend.shapes.selectAll("rect") 
 
      // Add a click event to each rectangle 
 
      .on("click", function (e) { 
 
      // This indicates whether the item is already visible or not 
 
      var hide = false; 
 
      var newFilters = []; 
 
      // If the filters contain the clicked shape hide it 
 
      filterValues.forEach(function (f) { 
 
       if (f === e.aggField.slice(-1)[0]) { 
 
       hide = true; 
 
       } else { 
 
       newFilters.push(f); 
 
       } 
 
      }); 
 
      // Hide the shape or show it 
 
      if (hide) { 
 
       d3.select(this).style("opacity", 0.2); 
 
      } else { 
 
       newFilters.push(e.aggField.slice(-1)[0]); 
 
       d3.select(this).style("opacity", 0.8); 
 
      } 
 
      // Update the filters 
 
      filterValues = newFilters; 
 
      // Filter the data 
 
      myChart.data = dimple.filterData(data, "Point", filterValues); 
 
      // Passing a duration parameter makes the chart animate. Without 
 
      // it there is no transition 
 
      myChart.draw(500); 
 
      }); 
 
\t \t \t 
 
\t \t d3.selectAll('.dropdown-submenu > a').on("click", function(d) { 
 
\t \t \t \t myChart.data = getData(data,this.text); 
 
\t \t \t \t myChart.draw(500); 
 
\t \t });

<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"> 
 
       Continent <span class="caret"></span> 
 
      </a> 
 
     <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
 
       
 

 
       <li class="dropdown-submenu"> 
 
       <a tabindex="-1" href="#" >Europe</a> 
 
       
 
       </li> 
 
       
 
       <li class="dropdown-submenu"> 
 
       <a tabindex="-1" href="#" >Middle East</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    <div id="chartContainer">

編輯：

的getData函數修改基於密鑰的數據。它需要兩個參數作爲輸入。第一個是原始數據，第二個是大陸。如果大陸是空的，它將返回整個數據。如果該大陸是歐洲，它將返回歐洲數據。

第一次分配數據時，我將關鍵參數設置爲空，以便返回數據。如果只想顯示歐洲數據，請將空字符串更改爲歐洲。

var myChart = new dimple.chart(svg, getData(data,"")); // entire data 
var myChart = new dimple.chart(svg, getData(data,"Europe")); // only Europe data