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"}]; 

나는이 내 데이터를 분할하고 d3.select("#btn")에 내 HTML에 각 ID를 주면 나는 알고있다. 그것은 작동하지만 그것은 내가 바라는 것이 아닙니다.

정말 도움이나 제안을 부탁드립니다.

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

EDIT :

GetData의 기능 키에 기초하여 상기 데이터를 수정한다. 입력으로 두 개의 매개 변수가 필요합니다. 첫 번째는 원래 데이터이고 두 번째는 대륙입니다. 대륙이 비어 있으면 전체 데이터를 반환합니다. 대륙이 유럽 인 경우 유럽 대륙 데이터를 반환합니다.

처음으로 데이터를 할당 할 때 키 매개 변수를 비어있는 것으로 설정하여 데이터를 반환합니다. 유럽 ​​데이터 만 표시하려면 빈 문자열을 유럽으로 변경하십시오.

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