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 に答える