我有一个表格,使用由node实时提供的数据进行更新。该表格是使用d3.js渲染的。
我的问题是我不知道如何使用d3.js为表格添加筛选、搜索和分页功能。我是一名初学者,很难理解在哪里放置代码最佳。我一直在考虑使用外部库来完成它,但如果我能找到一种只使用d3.js就可以做到更好、更清晰。
这是我的代码:
我的问题是我不知道如何使用d3.js为表格添加筛选、搜索和分页功能。我是一名初学者,很难理解在哪里放置代码最佳。我一直在考虑使用外部库来完成它,但如果我能找到一种只使用d3.js就可以做到更好、更清晰。
这是我的代码:
var table = d3.select('#data')
table.append('thead')
.append('tr')
.selectAll('th')
.data(['Title', 'Visits', 'Sales', 'Conversion(%)'])
.enter()
.append('th')
.text(function (d) { return d })
table.append('tbody')
function setupData(data) {
var rows = d3.select('tbody')
.selectAll('tr')
.data(data, function(d) { return d.title })
var entertd = rows.enter()
.append('tr')
.selectAll('td')
.data(function(d) { return d3.map(d).values() })
.enter()
.append('td')
entertd.append('div')
entertd.append('span')
var td = rows.selectAll('td')
.data(function(d) { return d3.map(d).entries() })
.attr('class', function (d) { return d.key })
td.select('div')
.transition()
.duration(800)
.style('width', function(d) {
switch (d.key) {
case 'conversion_rate' :
// percentage scale is static
scale = d3.scale.linear()
.domain([0, 1])
.range([0, 100])
break;
case 'today_visits':
case 'sold_today' :
scale = d3.scale.linear()
.domain(d3.extent(data, function(d1) { return d1[d.key] }))
.range([0, 100])
break;
default:
return '0px'
}
return scale(d.value) + 'px'
})
td.select('span')
.text(function(d) {
if (d.key == 'conversion_rate') {
return Math.round(100*d.value).toFixed(2) + '%';
}
return d.value
})
}
var socket = io();
//var data = [];
socket.on('sellers-'.concat(<%= seller %>), function(msg){
var data = [];
var seller = $.parseJSON(msg);
var items = seller['items'];
for(item in items) {
var item_data = items[item];
data.push({'title': item_data['title'], 'today_visits': item_data['today_visits'], 'sold_today': item_data['sold_today'], 'conversion_rate': item_data['conversion_rate']});
}
setupData(data);
//setupData(JSON.parse(msg).items)
});