javascript - D3.js HTML数据表下拉过滤

Question

我对 D3.JS 和 javascript 还很陌生。我按照一些教程使用 dimple.js 创建了我的图表。现在我正在尝试使用 D3.js 创建 HTML 表格。

我能够在 HTML 表格上显示所有数据，但我真正想要的是只显示与下拉菜单关联的数据。我不确定如何将我的下拉按钮与表格连接起来。我也没有在这里找到任何例子。

我非常感谢所有的帮助和反馈。我确实发布了所需的输出。

var svg = dimple.newSvg("#chartContainer", 590, 400);

var data = [
	{ channel: "Hypermarkets", "Price Tier": "Budget", "Unit Sales": 1765, "year": 2011},
    { channel: "Supermarkets", "Price Tier": "Budget", "Unit Sales": 965, "year": 2011},
    { channel: "Hypermarkets", "Price Tier": "Regular", "Unit Sales": 1265, "year": 2011},
    { channel: "Supermarkets", "Price Tier": "Regular", "Unit Sales": 765, "year": 2011},
    { channel: "Hypermarkets", "Price Tier": "Premium", "Unit Sales": 1165, "year": 2011},
    { channel: "Supermarkets", "Price Tier": "Premium", "Unit Sales": 877, "year": 2011},
    { channel: "Hypermarkets", "Price Tier": "Budget", "Unit Sales": 1565, "year": 2012},
    { channel: "Supermarkets", "Price Tier": "Budget", "Unit Sales": 565, "year": 2012},
    { channel: "Hypermarkets", "Price Tier": "Regular", "Unit Sales": 965, "year": 2012},
    { channel: "Supermarkets", "Price Tier": "Regular", "Unit Sales": 465, "year": 2012},
    { channel: "Hypermarkets", "Price Tier": "Premium", "Unit Sales": 1322, "year": 2012},
    { channel: "Supermarkets", "Price Tier": "Premium", "Unit Sales": 777, "year": 2012},
    { channel: "Hypermarkets", "Price Tier": "Budget", "Unit Sales": 1545, "year": 2013,},
    { channel: "Supermarkets", "Price Tier": "Budget", "Unit Sales": 932, "year": 2013,},
    { channel: "Hypermarkets", "Price Tier": "Regular", "Unit Sales": 1005, "year": 2013},
    { channel: "Supermarkets", "Price Tier": "Regular", "Unit Sales": 960, "year": 2013},
    { channel: "Hypermarkets", "Price Tier": "Premium", "Unit Sales": 1445, "year": 2013},
    { channel: "Supermarkets", "Price Tier": "Premium", "Unit Sales": 887, "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;
		
		extData.push(data[i])
	}
	return extData
}

var myChart = new dimple.chart(svg, getData(data,""));
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", ["Price Tier", "channel"]); 
var y =myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(["channel"], dimple.plot.bar);
myChart.addLegend(60, 10, 510, 20, "right");
y.tickFormat = ".0f"
myChart.draw();


    // column definitions
    var columns = [
        { head: 'Channel', cl: 'title', html: ƒ('channel') },
        { head: 'Price Tier', cl: 'center', html: ƒ('Price Tier') },
        { head: 'Unit Sales', cl: 'center', html: ƒ('Unit Sales') },
        { head: 'Year', cl: 'num', html: ƒ('year') }
    ];

    // create table
    var table = d3.select('body')
        .append('table');

    // create table header
    table.append('thead').append('tr')
        .selectAll('th')
        .data(columns).enter()
        .append('th')
        .attr('class', ƒ('cl'))
        .text(ƒ('head'));

    // create table body
    table.append('tbody')
        .selectAll('tr')
        .data(data).enter()
        .append('tr')
        .style("background-color", function(d, i){if(i%2 == 0){return "#D8D8D8";}})
        .selectAll('td')
        .data(function(row, i) {
            return columns.map(function(c) {
                // compute cell values for this specific row
                var cell = {};
                d3.keys(c).forEach(function(k) {
                    cell[k] = typeof c[k] == 'function' ? c[k](row,i) : c[k];
                });
                return cell;
            });
        }).enter()
        .append('td')
        .html(ƒ('html'))
        .attr('class', ƒ('cl'));

    function length() {
        var fmt = d3.format('02d');
        return function(l) { return Math.floor(l / 60) + ':' + fmt(l % 60) + ''; };
    }

     


var year = null;
var letter = null;

function chartsUpdate() {
	myChart.data = getData(data, year, letter);
	myChart.draw(500);
	
}


myChart.draw();
d3.selectAll('.dropdown-submenu.year > a').on("click", function(d) {
	year = this.text;
	chartsUpdate();
});

th { text-align: left; }
    th, td { padding: 0 1em 0.5ex 0;}
    th.center, td.center { text-align: center; }
    th.num, td.num { text-align: right; }

<script src="https://rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>

  <script src="http://dimplejs.org/dist/dimple.v2.1.6.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>
<script src="https://rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="http://d3js.org/d3.v3.min.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 id="chartContainer">

选择2011之后，html表格应该是这样的:

Answer 1

你应该减少你的图书馆。只需使用 d3，您就可以做任何您想做的事情。无论如何......这就是你想要的: https://jsfiddle.net/andresin87/fmcd0dvo/6/添加的代码:

function colsUpdate() {
    ...
}

...方法 on(“click”