Question

考虑以下事项（非常感谢Creating a table linked to a csv file）：

＆＃13;

var dataAsCsv = `Col1,Col2
Type1,"123,456"
Type2,"789,012"
Type3,"34,567"`;

var data = d3.csvParse(dataAsCsv);

var columns = ['Col1', 'Col2'];
	
var table = d3.select("#currentMonthTable").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; });

var rows = tbody.selectAll("tr")
    // create a row for each object in the data
                .data(data)
                .enter()
                .append("tr");

// 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")
            .text(function(d) { return d.value; });

＆＃13;

<script src="https://d3js.org/d3.v4.js"></script>
<body>
<div id="currentMonthTable"></div>
</body>

＆＃13;

我想对所有带有数字的单元格进行右对齐，并保持所有其他单元格的对齐方式相同。即：123,456，789,012和34,567都应该是正确的，但所有其他理由应该保持不变。

D3中最简单的方法是什么？请注意，我希望将其保留为D3，以便能够使用csv数据。

直观地说，我认为正确的解决方案可能需要为所有单元格提供一个CSS类，然后设置text-align:right;，但我不确定如何使用D3专门针对这些单元格。

Answer 1

以下一种方法：使用RegEx确定字符串是否为数字

我已使用this回答检查并相应添加了一个类：

.attr('class', function(d) {
    return /^[0-9,.]*$/.test(d.value) ? 'integer' : null;
});

和CSS：

#currentMonthTable table td.integer {
  text-align: right;
}

这是 代码段 ：

＆＃13;

var dataAsCsv = `Col1,Col2
Type1,"123,456"
Type2,"789,012"
Type3,"34,567"`;

var data = d3.csvParse(dataAsCsv);

var columns = ['Col1', 'Col2'];
	
var table = d3.select("#currentMonthTable").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; });

var rows = tbody.selectAll("tr")
    // create a row for each object in the data
                .data(data)
                .enter()
                .append("tr");

// 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")
            .text(function(d) { return d.value; })
            .attr('class', function(d) {
            	return /^[0-9,.]*$/.test(d.value) ? 'integer' : null;
            });

＆＃13;

#currentMonthTable table td.integer {
  text-align: right;
}

＆＃13;

<script src="https://d3js.org/d3.v4.js"></script>
<body>
<div id="currentMonthTable"></div>
</body>

＆＃13;

希望这有帮助。

Answer 2

您可以使用两个参数编写函数，即基准和当前单元格索引，例如： function(d, i) { ... }

以下添加为第1列中的单元格设置'numeric'类：

    .append("td")
        .classed('numeric', function(d,i) { return i == 1 } )
        .text(function(d) { return d.value; });

以下是修改后的原始代码和“数字”类：

var dataAsCsv = `Col1,Col2
Type1,"123,456"
Type2,"789,012"
Type3,"34,567"`;

var data = d3.csvParse(dataAsCsv);

var columns = ['Col1', 'Col2'];
	
var table = d3.select("#currentMonthTable").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; });

var rows = tbody.selectAll("tr")
    // create a row for each object in the data
                .data(data)
                .enter()
                .append("tr");

// 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")
            .classed('numeric', function(d,i) { return i == 1 } )
            .text(function(d) { return d.value; });

<style type="text/css">.numeric { text-align: right }</style>
<script src="https://d3js.org/d3.v4.js"></script>
<body>
<div id="currentMonthTable"></div>
</body>

右对齐在D3中创建的HTML表

2 个答案: