Question

我有一个数组数组，其中每个子数组代表表中的一行。每行有：5个文本元素，最后一个元素是一个对象。对于每一行，我必须在5个单元格中打印5个文本，在第6个单元格中，我必须根据对象的特性绘制一个svg图。

为此，我正在使用d3js，但我对如何区分何时打印文本以及何时打印svg感到困惑。这是代码：

 data_norm<- function(x) {((x-min(x))/(max(x)-min(x)))}
 variables_norm<- as.data.frame(lapply(data[1:17], data_norm)) 
 summary(variables_norm)

因此，我为每一行创建一个类为“ row”的div。在该行的内部，我为每个单元格为“ cell”的单元格创建了一个div，并在其中的每个单元格后面附加了一个“ text”类的跨度以及数据文本。

这可行，但是在第6个单元格中，我当然得到了对象的文本表示形式。在每行的第6个单元格中，我不应该附加span.text和打印文本，而应附加svg并开始绘制读取对象属性的矩形。

我该怎么做？非常感谢。

Answer 1

创建所有单元格的选择，然后根据行中的索引对其进行过滤

var cells = d3.select(".main")
    .selectAll("div")
    .data(newdata)
    .enter()
    .append("div")
    .classed("row", true)
    .selectAll(".row")
    .data(function(d) { return d; })
    .enter()
    .append("div")
    .classed("cell", true);

cells.filter( (d,i) => i <= 4 )
    .append("span")
    .classed("text", true)
    .text(function(d) { return d; });

cells.filter( (d,i) => i === 5 )
    .append("svg");

在d3js中从数组数组创建表结构并绘制文本或图形

1 个答案: