gpt4 book ai didi

d3.js - DC JS : How to highlight rows in an aggregated data table on click, 类似于条形图?

转载 作者:行者123 更新时间:2023-12-02 09:11:37 25 4
gpt4 key购买 nike

我喜欢 DC.JS 库,并且一直在尝试在 DC.js 中创建一个可点击的聚合表,并取得了部分成功。我想突出显示单击事件中的行(允许多项选择),类似于 dc js 中的行图或有序条形图。与折线图一样,当进行多项选择时,应突出显示多个表格行。

我无法选择我单击的行,相反,无论我单击哪一行,我的 CSS 都会选择第一行。我尝试使用“this”关键字来选择被点击的当前行,但无济于事。

这是 js fiddle :https://jsfiddle.net/yashnigam/kvt9xnbs/83/

这是我进行 css 选择的点击事件的代码:

       marketTable.on("renderlet", function(chart){

chart.selectAll('tr.dc-table-row').on('click',function(d){

if(filterKeys.includes(d.key)){

chart.select('tr.dc-table-row').datum(d.key).style('background-color','gray');
}

})

});

请分享一种在点击时突出显示数据表行的方法,与在行图表上的工作方式相同。

最佳答案

@Hassan 的想法是正确的。我会建议选择 trs 而不是 tds,而不是在点击时更改类(这不会在重绘后继续存在),而是在期间也应用类pretransition 事件。

所以:

tr.dc-table-row.sel-rows {
background-color: lightblue;
}

marketTable.on('pretransition', function (table) {
table.selectAll('td.dc-table-column')
.on('click', /* ... */)
table.selectAll('tr.dc-table-row')
.classed('sel-rows', d => filterKeys.indexOf(d.key) !== -1)
});

highlighted rows我们根据行的键是否在数组中来应用该类。简单明了!

Fork of your fiddle.

使用内置过滤器

@vbernal 指出当您单击重置链接时,列表不会被重置。为了更好地集成它,我们可以 Hook 到表从基本 mixin 继承的内置过滤器(但通常不使用):

  marketTable.on('pretransition', function (table) {
table.selectAll('td.dc-table-column')
.on('click',function(d){
let filters = table.filters().slice();
if(filters.indexOf(d.key)===-1)
filters.push(d.key);
else
filters = filters.filter(k => k != d.key);
table.replaceFilter([filters]);
dc.redrawAll();
});
let filters = table.filters();
table.selectAll('tr.dc-table-row')
.classed('sel-rows', d => filters.indexOf(d.key) !== -1);
});

我们不是自己设置 dimension.filter(),而是获取现有的 table.filters(),根据需要进行切换,然后使用

table.replaceFilter([filters])

(注意额外的括号。)

单击重置链接时,我们重置表上的过滤器而不是交叉过滤器维度。 (通过图表操作过滤器总是更好,因为图表无法从交叉过滤器维度读取选择状态。)

$('#resetTable').on('click', function() {
marketTable.filter(null);
dc.redrawAll();
});

New version of fiddle.

关于d3.js - DC JS : How to highlight rows in an aggregated data table on click, 类似于条形图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51373150/

25 4 0