D3js Как отформатировать содержимое некоторых столбцов в таблице

Question

У меня этот код интерактивного стола, сделанный с 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;});` 

`

Answer 1

Одним из способов достижения этой цели было бы изменить функцию обратного вызова на последней строке из этого:

.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)+'%'; }) 

Этот подход ограничивает вашу способность делать другие расчеты с данными на более позднее время.

Answer 2

Я бы рекомендовал изменения последнюю строку:

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

Это меняет все атрибуты, которые имеют тип номера (в вашем случае kind1 и kind2) в процентах, с десятичной точностью заданной в параметре вызова .toFixed().