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

标签 javascript jquery html 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">

最佳答案

你们非常接近。在您为 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">

关于javascript - D3.js选择过滤器更新图表dimple.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39085865/

上一篇：java - 如何使用 Webfirmframework 将组件添加到现有 HTML？

下一篇：html - 背景颜色与文本或链接的高度和宽度相同

相关文章：

javascript - Windows 8 应用栏窃取焦点

javascript - 避免在 array.from 中使用临时变量的一个衬垫？

javascript - JavaScript 中的非确定性图像属性数据

jquery - 音频按钮在一个模式框中有效，但在另一模式框中无效，为什么？

html - 浏览器的CSS条件

javascript - AngularJS:基本的错误处理

javascript - 从定义的元素总数中获取第一个特定元素

javascript - 刷新页面时计时器会自动刷新

javascript - 当用户单击按钮时打开 Google 文档

html - 使用包含列的数据集内容渲染 Div

©2024 IT工具网  联系我们