D3js如何格式化表中某些列的内容

时间:2016-09-03 17:02:34

标签: javascript d3.js

我有这个用d3制作的交互式表格的代码,它运行得很好。唯一的问题是我希望第二列和第三列内容显示为百分比。 我正在使用的csv文件如下所示:

CSV
date,kind1,kind2,place
17/03/2014,0.28,0.46,NY
....  

我想我需要再次使用地图功能,但是我感到很困惑,有什么帮助吗?

 var table = d3.select("body")
    .append("table")
    .attr("class", "table"),
    thead = table.append("thead"),
    tbody = table.append("tbody");

d3.csv("data.csv", function(error, data){

var columns = Object.keys(data[0])

var header = thead.append("tr")
    .selectAll("th")
    .data(columns)
    .enter()
    .append("th")
        .text(function(d){ return d;});

var rows = tbody.selectAll("tr")
    .data(data)
    .enter()
    .append("tr")
    .on("mouseover", function(d){
        d3.select(this)
            .style("background-color", "orange");
    })
    .on("mouseout", function(d){
        d3.select(this)
            .style("background-color","transparent");
    });

var cells = rows.selectAll("td ")
    .data(function(row){
        return columns.map(function(d, i){
            return {i: d, value: row[d]};
        });
    })
    .enter()
    .append("td")
    .html(function(d){ return d.value;});`

`

2 个答案:

答案 0 :(得分:0)

实现目标的一种方法是更改​​最后一行的回调:

.html(function(d){ return d.value;})

到此:

.html(function(d,i){ if(i == 1 || i == 2) return (d.value*100) + '%'; return d.value; })

这利用了d3用数据和索引调用所有仿函数的方式。根据您的数据,可能有比查看索引更好的方法。

或者,您可以在阅读数据后预先添加百分号:

data.forEach(function(d) { d[1] = (d[1]*100)+'%'; d[2] = (d[2]*100)+'%'; })

这种方法限制了您以后使用数据进行其他计算的能力。

答案 1 :(得分:0)

我建议将最后一行更改为:

.html(function(d){ return typeof(d.value)==="number"?(100*d.value).toFixed(1)+"%":d.value;});

这会将所有数字类型的属性(在您的情况下为kind1和kind2)更改为百分比,并在.toFixed()调用的参数中给出小数精度。