0
저는 D3.JS와 javascript로 새롭게 출시되었습니다. 나는 dimple.js로 차트를 만들기 위해 튜토리얼을 따라 갔다. 이제 D3.js로 HTML 표를 만들려고합니다.D3.js 드롭 다운 별 HTML 데이터 테이블 필터
HTML 테이블에 모든 데이터를 표시 할 수 있었지만 실제로 원하는 것은 데이터 만 표시하고 드롭 다운 메뉴와 연결하는 것입니다. 내 드롭 다운 버튼을 테이블과 연결하는 방법을 잘 모르겠습니다. 나는 여기도 모범을 찾지 못했다.
모든 도움과 의견에 진심으로 감사드립니다. 나는 원하는 출력을 게시했다.
var svg = dimple.newSvg("#chartContainer", 590, 400);
var data = [
\t { 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}
\t
];
function getData(data, year, letter) {
\t var extData = [];
\t for(var i = 0; i < data.length; i++) {
\t \t if (year != null && data[i]["year"] != year)
\t \t \t continue;
\t \t
\t \t extData.push(data[i])
\t }
\t 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() {
\t myChart.data = getData(data, year, letter);
\t myChart.draw(500);
\t
}
myChart.draw();
d3.selectAll('.dropdown-submenu.year > a').on("click", function(d) {
\t year = this.text;
\t 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">
\t \t \t \t <li class="dropdown-submenu year">
\t \t \t \t \t <a tabindex="-1" href="#" >2011</a>
\t \t \t \t </li>
\t \t \t \t <li class="dropdown-submenu year">
\t \t \t \t \t <a tabindex="-1" href="#" >2012</a>
\t \t \t \t </li>
\t \t \t \t <li class="dropdown-submenu year">
\t \t \t \t \t <a tabindex="-1" href="#" >2013</a>
\t \t \t \t </li>
</ul>
</div>
<div id="chartContainer">