Question

I’m just starting to learn D3. I was playing around with generating tables from arrays (from examples in the tutorials) and I’m wondering what’s the best way to highlight a column on mouseover? Below is my first attempt.

    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);
            })

[UPDATE]
I tried Josh’s solution and it is much faster than what I have above. Below is the updated version. I set the table to 256×256 and I didn’t notice any slowdown, where the above solution has a huge delay.

  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);
            })

Answer 1

This seems like a reasonable way to accomplish your goal, you could also consider giving each row a different class name, ie row1, row2, etc.., then selecting the row by class, ie:

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

I’m sure there are probably lots of other variants to do this as well