D3 的多维数组答案

【问题标题】：Multidimensional array for D3D3 的多维数组
【发布时间】：2017-10-08 08:47:14
【问题描述】：

以下代码适用于D3 V3，但不适用于D3 V4，如何纠正？

<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.js" type="text/JavaScript"></script-->
<body></body>
<script>
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", 500)
        .attr("height", 500);


svg.append("g")
        .selectAll("g")
        .data(dataset)
        .enter()
        .append("g") //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) { console.log(j);return (i * 20) + 40; })
        .attr("y", function(d,i,j) { return (j * 20) + 40; })
        .attr("font-family", "sans-serif")
        .attr("font-size", "20px")


</script>

【问题讨论】：

标签： d3.js multidimensional-array

【解决方案1】：

这里的解释很简单，就是我this answer的主题：第三个参数从D3 v3变成了D3 v4。

这是有问题的行：

.attr("y", function(d,i,j) { return (j * 20) + 40; })
//the 3rd argum. -------^            ^--- using the 3rd argument

在 D3 v3 中，第三个参数是父组的索引。但是，在 v4 中，第三个参数是当前组。 changelog 很清楚：

传递给回调函数的参数在 4.0 中略有改变，以更加一致。标准参数是元素的数据 (d)、元素的索引 (i) 和元素的组（节点），其中 this 作为元素。

但是有一种方法可以在 v4 中实现您想要的！相同的变更日志说：

这个约定的轻微例外是 selection.data，它是针对每个组而不是每个元素进行评估的；它被传递组的父数据 (d)、组索引 (i) 和选择的父项 (parents)，其中 this 作为组的父项。（强调我的）

因此，我们可以使用data() 方法来获取组的索引。

在这里，我使用的是local variable...

var local = d3.local();

...获取data()中的索引：

.data( function(d,i) { 
    local.set(this, i);
    return d;
})

然后，用它来设置y的位置：

.attr("y", function(d) {
    return (local.get(this) * 20) + 40;
})

这是您的更改代码：

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", 500)
  .attr("height", 500);

var local = d3.local();

svg.append("g")
  .selectAll("g")
  .data(dataset)
  .enter()
  .append("g")
  .selectAll("text")
  .data(function(d, i) {
    local.set(this, i)
    return d;
  })
  .enter()
  .append("text")
  .text(function(d, i, j) {
    return d;
  })
  .attr("x", function(d, i, j) {
    return (i * 20) + 40;
  })
  .attr("y", function(d) {
    return (local.get(this) * 20) + 40;
  })
  .attr("font-family", "sans-serif")
  .attr("font-size", "20px")

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

【讨论】：

@GerardoFurtado 谢谢！我还有一个后续问题：stackoverflow.com/questions/46630697/…希望你也可以看看！
@william007 我刚刚看了下，解决方法很简单。但是，在 S.O. 这是一个很好的行为。在寻求进一步帮助之前确认您收到的答案（这个）。
@GerardoFurtado 完成了 :)