2

我刚开始学习D3。我正在玩从数组生成表（来自教程中的示例），我想知道在鼠标悬停时突出显示列的最佳方法是什么？下面是我的第一次尝试。

    var tableData = [], colCnt = 100, rowCnt = 100;
    //Generate 2d array with values
    for( var i=0; i<rowCnt; i++ ){
        tableData.push( d3.range(i*colCnt, (i*colCnt)+colCnt) )
    }

    d3.select('#viz').append('table')
            .style('border-collapse', 'collapse')
            .style('border', '2px solid black')
        .selectAll('tr')
        .data( tableData )
        .enter().append('tr')
            //Highlight the row
            .on('mouseover', function(){d3.select(this).style('background-color', 'gray');})
            .on('mouseout', function(){d3.select(this).style('background-color', 'white');})
        .selectAll('td')
        .data( function(d){ return d; } )
        .enter().append('td')
            .text(String)
            .style('border', '1px solid black')
            .style('padding', '5px')
            //Highlight the column
            .on('mouseover', function(d,i){
                //d3.select(this).style('background-color','lightgray');
                d3.select(this.parentNode.parentNode).selectAll('tr')
                    .selectAll('td')
                        .style('background-color', function(d,j){ return i==j ? 'lightgray' : null;});
            })
            .on('mouseout', function(d,i){
                //d3.select(this).style('background-color', null);
                d3.select(this.parentNode.parentNode).selectAll('tr').selectAll('td').style('background-color', null);
            })

[更新] 我尝试了 Josh 的解决方案，它比我上面的要快得多。以下是更新版本。我将表格设置为 256x256，我没有注意到任何减速，上面的解决方案有很大的延迟。

  d3.select('#viz').append('table')
            .style('border-collapse', 'collapse')
            .style('border', '2px solid black')
        .selectAll('tr')
        .data( tableData )
        .enter().append('tr')
            .on('mouseover', function(){d3.select(this).style('background-color', 'gray');})
            .on('mouseout', function(){d3.select(this).style('background-color', 'white');})
        .selectAll('td')
        .data( function(d){ return d; } )
        .enter().append('td')
            .text(String)
            .style('border', '1px solid black')
            .style('padding', '5px')
            .attr('class', function(d,i){ return "col_" + i; })
            .on('mouseover', function(d,i){
               d3.selectAll('td.col_' + i)
                    .style('background-color', 'lightgray');
            })
            .on('mouseout', function(d,i){
               d3.selectAll('td.col_' + i)
                    .style('background-color', null);
            })
4

1 回答 1

4

这似乎是实现目标的合理方法，您还可以考虑为每一行赋予不同的类名，即 row1、row2 等，然后按类选择行，即：

.on('mouseover', function(d,i){
    d3.select(".row" + i)
        .style('background-color', 'lightgray);
})

我敢肯定，可能还有很多其他变体可以做到这一点

于 2012-07-08T01:15:54.513 回答