D3.js 选择从d3中的列表创建的矩阵的列

我有以下生成5列x7行矩阵的代码

var flatMatrix = [1,1,1,0,0,3,3,3,0,0,4,4,4,0,0,5,5,5,0,0,0,2,0,4,4,0,0,0,5,5,0,1,0,2,2];
var m = 5;
var r = 3;

var numbers = svg.selectAll("numbers").data(flatMatrix).enter().append("text")
    .attr("x",function(d,i) { return (i % m)*50 + 10 + r; })
    .attr("y",function(d,i) { return Math.floor(i / m) *50+50; })
    .style("opacity", 0.5)
    .text(function(d) { return d; })
    .on("mouseover",function(d) { d3.select(this).style("opacity", 1.0); })
    .on("mouseout",function(d) { d3.select(this).style("opacity", 0.5); })

var columns = svg.selectAll("numbers").data(flatMatrix).select(function(d, i) {return i % m});
console.log(columns);

我现在尝试将列组合在一起，以便对它们执行操作，例如不透明度转换：

columns.transition().style("opacity", 1).duration(1000)

---

有不同的方法可以做到这一点。我个人会基于

flatMatrix

创建一个对象数组，每个对象都有三个属性：

列

、

行

和

值

（检查我的），这样以后您就可以轻松地操作数据了

然而，这是可能的与平面阵列您有。但是，您应该使用

selection.filter

例如，将第三列（i==2）设为红色：

下面是一个演示：

var svg=d3.选择（“svg”）；
var flatMatrix=[1,1,1,0,0,3,3,0,0,4,4,0,0,5,5,5,0,0,0,2,0,4,4,0,0,0,0,5,5,0,1,0,2,2]；
var m=5；
var r=3；
var numbers=svg.selectAll（“数字”）.data（flatMatrix.enter（）.append（“文本”）
.attr（“x”，函数（d，i）{
收益率（i%m）*50+10+r；
})
.attr（“y”，函数（d，i）{
返回数学楼层（i/m）*50+50；
})
.文本（功能（d）{
返回d；
});
var columns=numbers.filter（函数（d，i）{
返回i%m==2
}).attr（“填充”、“红色”）

您有没有可能也给我看一下对象数组？当我使用动画/交互功能创建更复杂的矩阵子选择时，它可能就是我所需要的。例如，每个对象都有一个
列
，
行
和
值
属性：
var columns = numbers.filter(function(d, i){
    return i % m === 2;
}).attr("fill", "red");