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

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

1,3,3,5,6,7

3,5,8,3,2,6

9,0,6,3,6,3

等等

我如何修改代码，这样我可以显示这样的事情：

等...

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

这是与不同的阵列数的什么检查元素给出：

谢谢！

来源

2014-02-12 201403540

您正在将SVG元素'g'和'text'与非SVG元素'p'混合使用。这是无效的;浏览器不知道如何渲染。如果你的viz将是全部文本，那么只需使用纯html元素即可。如果你需要使用SVG（因为会出现一些图形），那么会丢失'p'。 – meetamit

我不确定你在找什么，但这基本上是规范[嵌套选择]（http://bost.ocks.org/mike/nest/）示例 - http://jsfiddle.net/ f4vAm/1/ –

@meetamit如果我将所有“p”替换为“text”，也会发生同样的情况。 – 201403540

你几乎没有，只有两个小事情：

正如metaamit指出，有一个在SVG无p元素 - 用g代替。
对于y位置，请使用父元素的索引j而不是i。

完整示例here。

来源

2014-02-12 21:36:43

我最初有几行： .selectAll（“p”）和.append（“p”）//用“p”作为“文本”删除，你知道为什么文本没有显示吗？ – 201403540

无法在SVG中将'text'嵌套到'text'元素中。 –

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

回答

相关问题