Dimple.js 当 select 下拉条件时更新图表

Question

我是 D3.js 和酒窝的新手。几周来我一直在研究 Dimple.js 图表。到目前为止，酒窝对我来说效果很好。我正在为我的图表创建过滤条件。所以我使用 bootstrap 创建下拉菜单。

我创建示例 Here 我想要实现的目标，在“Continent”下拉菜单中，如果我 select 或者欧洲或中东，我只想查看带有相关数据的图表。

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) {
 var extData = [];
 if(key == "")
 {
  return data;
 }
 for(var i = 0; i < data.length; i++) {
  if(data[i]["continent"] == key) {
   extData.push(data[i])
  }
 }
 return extData
} 
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);
          }); 
   
    d3.selectAll('.dropdown-submenu > a').on("click", function(d) {
    myChart.data = getData(data,this.text);
    myChart.draw(500);
    });

<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函数根据key修改数据。它需要两个参数作为输入。第一个是原始数据，第二个是大陆。如果大陆是空的，它将 return 整个数据。如果大陆是欧洲，它将 return 欧洲数据。

第一次分配数据时，我将关键参数设置为空，因此它将 return 数据。如果只想显示欧洲数据，请将空字符串更改为欧洲。

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

Dimple.js 当 select 下拉条件时更新图表

Dimple.js Update chart when select dropdown criteria

html

jquery

d3.js

angular-ui-bootstrap

dimple.js