Question

我在d3中创建了一个从Excel导出的数据作为tsv的表。下面的代码工作得很好，但是有一些解析选择我似乎无法解决的问题。

首先，我想使用forEach将所有数值数据解析为数字。我的表有四列，第一列是字符串数据，其他都是数字，但我不能省略解析的第一列。

其次，在出现负数的情况下，客户需要将它们显示在括号中，例如（12,345）我不能纠缠d3格式以去除减号并添加括号。

现在解决了第三点。第三，我希望能够有一个未显示的附加列，但是可以访问将某个类应用于特定行的tr，以便我们可以在css中设置它们的样式。下面的代码是为每一行添加一个唯一的类，但只有在事先知道哪些行具有某种样式时才有效。我需要客户端能够选择要应用样式的行。

d3.tsv("data/index.tsv", function(data) {
// the columns you'd like to display
var columns = ["Trading Summary", "Budget", "Actual", "Variance"];

var table = d3.select("#currentMonth").append("table"),
    thead = table.append("thead"),
    tbody = table.append("tbody");

// append the header row
thead.append("tr")
    .selectAll("th")
    .data(columns)
    .enter()
    .append("th")
        .text(function(column) { return column; }); 


// create a row for each object in the data
var rows = tbody.selectAll("tr")
    .data(data)
    .enter()
    .append("tr")
    .attr("class", function(d, i) { return "indexRow" + i; });

// create a cell in each row for each column
var cells = rows.selectAll("td")
    .data(function(row) {
        return columns.map(function(column) {
            return {column: column, value: row[column]};
        });
    })
    .enter()
    .append("td")
        .attr("class", function(d) { return d.column; })
        .text(function(d) { return d.value; });

});

我希望我已经相对清楚地解释了这一点。

非常感谢任何帮助。

数据样本：

Trading Summary Budget  Actual  Variance
SALES   200,000 104,374 (95,626)
LESS COST OF GOODS SOLD 24,000  (23,563)    (47,563)
LESS MANUFACTURING COSTS    123,550 52,153  (71,397)
    147,550 28,589  (118,961)

d3.js html表 - 解析值

0 个答案: