Question

我有以下代码生成5列x 7行矩阵

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)

Answer 1

有不同的方法可以做到这一点。我个人会根据flatMatrix创建一个对象数组，每个对象都有三个属性：column，row和value（检查我的comment below），这样您以后就可以轻松操作数据了。

尽管如此，您可以使用平面阵列。但是，您应该使用selection.filter代替。

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

var columns = numbers.filter(function(d, i){
    return i % m === 2;
}).attr("fill", "red");

这是一个演示：

var svg = d3.select("svg");
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;
  })
  .text(function(d) {
    return d;
  });

var columns = numbers.filter(function(d, i) {
  return i % m === 2
}).attr("fill", "red");

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg width="300" height="300"></svg>

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

1 个答案: