D3.js选择过滤器更新图表dimple.js

时间：2016-08-22 17:57:18

标签： javascript jquery html d3.js dimple.js

我必须通过下拉菜单选择来过滤数据。它工作得很好;但是，由于下拉工作就像点击选项一样，它会立即呈现图表。

我要做的是从两个下拉菜单中选择，然后点击＆＃34;提交＆＃34;渲染图表。

以下是FIDDLE示例，但我的是多个而不是单一选择。

我尝试用简单的HTML替换我的引导下拉列表但是我没有运气。

＆＃13;
＆＃13; 
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();
});
＆＃13; 
    <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">
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

你非常接近。在您注册d3.selectAll('.dropdown-submenu.year > a').on("click")的回调中，您拨打了chartsUpdate。这意味着每次单击下拉列表时，您都会更新图表。我删除了这些调用并添加了一个提交按钮，单击时会调用chartsUpdate。

＆＃13;
＆＃13; 
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);
＆＃13; 
<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">
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题