D3.JS:单击行时恢复单元格值

时间:2019-04-09 12:23:23

标签: d3.js

我用d3.js从csv制作了一个表。当我单击一个单元格时,我想获取其行中最后一个单元格的值。

我尝试过这个:



     var container = d3.select("body")
        .append("table")
        .attr("id","myTable");
        //header
        var headers=container.append("thead").append("tr")
                .selectAll("th")
                .data(titles)
                .enter().append("th")

                .text(function(d) {
                    return d;
                });
        var rows=container.append("tbody")
            .selectAll("tr").data(dataCSV)
            .enter().append("tr")
        .on('click',function(d){
                if(d3.select(this).classed("highlight")){
                d3.selectAll("tr").classed("highlight", false);
            }else{
                d3.selectAll("tr").classed("highlight", false);
                      d3.select(this).classed("highlight", true);           
            }

        });

        rows.selectAll("td")
          .data(function (d) {
            return titles.map(function (k) {
                return { 'value': d[k], 'name': k};
            });
          }).enter()
          .append('td')
          .attr("style","width:"+widthCellule+"%")
          .attr('data-th', function (d) {
            return d.name;
         })
        .text(function (d) {
            return d.value;
        })


    /* Here is my mistake , I d'ont know */
    .on('click',function(d,i,j){
    column=i;
    last_column=titles.length;
    alert(d3.select('id','myTable').rows[j].cells[last_column].innerHTML);

    });

0 个答案:

没有答案