在 D3.js 中显示多维数组中的数据答案

【问题标题】：Displaying Data from Multidimensional Array in D3.js在 D3.js 中显示多维数组中的数据
【发布时间】：2014-03-11 11:46:48
【问题描述】：

我正在尝试使用 d3 显示来自多维数组的数据。使用下面的代码，浏览器中没有出现任何内容。检查元素显示每个数组中每个元素的文本都存在，但它们只是没有出现在页面上。但是，当我删除下面已注释的行时，我会得到下面的示例输出：

1,3,3,5,6,7

3,5,8,3,2,6

9,0,6,3,6,3

etc ...

如何修改代码以便显示如下内容：

1 3 3 5 6 7

3 5 8 3 2 6

etc...

代码：

var dataset = [
    [1,3,3,5,6,7],
    [3,5,8,3,2,6],
    [9,0,6,3,6,3],
    [3,4,4,5,6,8],
    [3,4,5,2,1,8]
];

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

svg.append("g")
    .selectAll("p")                 
    .data(dataset)
    .enter()
    .append("p") // removing
    .selectAll("text") // these
    .data( function(d,i,j) { return d; } ) // lines
    .enter() // text displays normally
    .append("text")
    .text( function(d,i,j) { return d; } )
    .attr("x", function(d,i,j) { return (i * 20) + 40; })
    .attr("y", function(d,i,j) { return (i * 20) + 40; })
    .attr("font-family", "sans-serif")
    .attr("font-size", "20px")
    .attr("fill", textColour);

这是检查元素给出的不同数字数组：

【问题讨论】：

您将 SVG 元素 g 和 text 与非 SVG 元素 p 混合。那是无效的；浏览器不知道如何呈现它。如果您的 viz 将是所有文本，那么坚持使用纯 html 元素。如果你需要使用 SVG（因为会有一些图形来），那就丢掉p。
我不确定您在寻找什么，但这基本上是典型的 nested selection 示例 -- jsfiddle.net/f4vAm/1
@meetamit 如果我将所有“p”替换为“text”，也会发生同样的情况。
@LarsKotthoff 谢谢！这正是我一直在寻找的，我哪里出错了？
我会添加一些解释的答案。

标签： javascript svg multidimensional-array d3.js

【解决方案1】：

你快到了，只有两件小事：

正如 metaamit 所指出的，SVG 中没有 p 元素 - 请改用 g。
对于 y 位置，使用父元素的索引 j 而不是 i。

完整示例here。

【讨论】：

我最初有以下几行：.selectAll("p") 和 .append("p") //将“p”作为“文本”删除，你知道为什么文本没有' t 显示呢？
您不能在 SVG 中将 text 嵌套在 text 元素中。
它对我不起作用！我收到一个错误：“错误：属性 y：预期长度，“NaN”。”在这一行：return (j * 20) + 40; J 是文本元素而不是标量。