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

Question

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

1,3,3,5,6,7

3,5,8,3,2,6

9,0,6,3,6,3

等等......

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

1 3 3 5 6 7

3 5 8 3 2 6

等...

            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);

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

谢谢！

Answer 1

你几乎就在那里，只有两件小事：

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

完整示例here。