D3.js D3的多维数组_D3.js_Multidimensional Array

D3.js D3的多维数组

d3.js

D3.js D3的多维数组,d3.js,multidimensional-array,D3.js,Multidimensional Array,下面的代码适用于D3V3，但不适用于D3V4，如何纠正它 <!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="te

下面的代码适用于D3V3，但不适用于D3V4，如何纠正它

<!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>


var数据集=[[1,3,3,5,6,7]，[3,5,8,3,2,6]，[9,0,6,3,6,6,3]，[3,4,4,5,6,8]，[3,4,5,2,1,8]；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
svg.append（“g”）
.全选（“g”）
.数据（数据集）
.输入（）
.append（“g”）//删除
.selectAll（“text”）//这些
.data（函数（d，i，j）{返回d；}）//行
.enter（）//文本正常显示
.append（“文本”）
.text（函数（d，i，j）{返回d；}）
.attr（“x”，函数（d，i，j）{console.log（j）；返回（i*20）+40；}）
.attr（“y”，函数（d，i，j）{return（j*20）+40；}）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“20px”）

这里的解释很简单，这是我的主题：第三个参数已从D3 v3更改为D3 v4

这是有问题的一行：

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

在D3V3中，第三个参数是父组的索引。但是，在v4中，第三个参数是当前组。问题很清楚：

在4.0中，传递给回调函数的参数稍有更改，以便更加一致。标准参数是元素的基准（d）、元素的索引（i）和元素的组（节点），并将其作为元素

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

此约定的一个轻微例外是selection.data，它针对每个组而不是每个元素进行评估；它被传递给组的父数据（d）、组索引（i）和选择的父数据（父数据），并以此作为组的父数据。（强调矿山）

因此，我们可以使用

data（）

方法来获取组的索引

这里，我用的是

。。。要获取

数据（）中的索引，请执行以下操作：
然后，使用它设置y
位置：
.attr("y", function(d) {
    return (local.get(this) * 20) + 40;
})

以下是更改后的代码：

var数据集=[
[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.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
var local=d3.local（）；
svg.append（“g”）
.全选（“g”）
.数据（数据集）
.输入（）
.附加（“g”）
.selectAll（“文本”）
.数据（功能（d，i）{
local.set（本，i）
返回d；
})
.输入（）
.append（“文本”）
.文本（功能（d、i、j）{
返回d；
})
.attr（“x”，函数（d，i，j）{
返回（i*20）+40；
})
.attr（“y”，函数（d）{
返回（本地。获取（此）*20）+40；
})
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“20px”）
@GerardoFurtado谢谢！我还有一个后续问题：希望你也能看看@william007我只是看了一下，解决方法很简单。然而，在s.O.这是一种很好的行为。在请求进一步帮助之前，先承认你收到的答案（这一个）。@GerardoFurtado做到了：）
.data( function(d,i) { 
    local.set(this, i);
    return d;
})

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