將矩陣的元素逐個單元格系結到網格

我正在嘗試創建一個影片，其中網格的元素以從左到右、從上到下的順序出現。所以順序是：A_(1,1), A_(1,2),... A_(1,d)... A_(n,d)。

我當前的代碼顯示網格的一列中的所有元素，然后是延遲，然后是第二列中的所有元素，延遲，依此類推。我確信這是因為第 56 行中控制每個元素的時間延遲的索引元素會隨每一行重置。我想知道是否有辦法解決這個問題，比如有一個變數來跟蹤 d 的列號。

var data = [[0,1],[2,3]];

function myMatrix2(data) {

    var margin = {top: 50, right: 100, bottom: 50, left: 100},
        width = 250,
        height = 250;

    const svg = d3
        .select('.grid2')
        .append('svg')
        .attr("width", width   margin.left   margin.right)
        .attr("height", height   margin.top   margin.bottom)
        .append("g")
        .attr("transform", "translate("   margin.left   ","   margin.top   ")");

    numrows = data.length;
    numcols = data[0].length;

    rw=width/numrows;
    hw=height/numcols;

    var x = d3.scaleOrdinal()
        .domain(d3.range(numcols))
        .range(d3.range(0,width,width/numcols));

    var y = d3.scaleOrdinal()
        .domain(d3.range(numrows))
        .range(d3.range(0,height,height/numrows));

    var row = svg.selectAll(".row")
        .data(data)
        .enter().append("g")
        .attr("class", "row")
        .attr("transform", function(d, i) {return "translate(0,"   y(i)   ")"; });

    var cell = row.selectAll(".cell")
        .data(function(d) { return d; })
        .enter().append("g")
        .attr("class", "cell")
        .attr("transform", function(d, i) { return "translate("   x(i)   ", 0)"; });

    cell.append('rect')
        .attr("width", rw)
        .attr("height", hw)
        .style("stroke", "black")
        .style("stroke-width", "2px")
        .style("fill", 'white')

    cell.append("text") //Add matrix elements
        .attr("dy", ".32em")
        .attr("x", rw/2 )
        .attr("y", hw/2 )
        .attr("text-anchor", "middle")
        .style("font-size","14px")
        .transition() //Delay starts here
        .delay(function(d,i) {console.log("D: " d   " I: " i); return i*3000;})
        .text(function(d) { return d; })
    return;
};

uj5u.com熱心網友回復：

有幾種方法可以做到這一點。我最喜歡的慣用 D3 方法之一是使用區域變數設定父行的索引...

local.set(this, i);

...然后檢索該索引以設定延遲：

.delay(function(d, i) {
    const p = local.get(this);
    return i * 1000   p * (1000 / numrows);
})

這是帶有 3x3 矩陣的代碼：

顯示代碼片段

var data = [
  [0, 1, 4],
  [2, 3, 6],
  [7, 8, 9]
];
const local = d3.local();

myMatrix2(data);

function myMatrix2(data) {

  var margin = {
      top: 4,
      right: 10,
      bottom: 4,
      left: 10
    },
    width = 150,
    height = 150;

  const svg = d3
    .select('body')
    .append('svg')
    .attr("width", width   margin.left   margin.right)
    .attr("height", height   margin.top   margin.bottom)
    .append("g")
    .attr("transform", "translate("   margin.left   ","   margin.top   ")");

  numrows = data.length;
  numcols = data[0].length;

  rw = width / numrows;
  hw = height / numcols;

  var x = d3.scaleOrdinal()
    .domain(d3.range(numcols))
    .range(d3.range(0, width, width / numcols));

  var y = d3.scaleOrdinal()
    .domain(d3.range(numrows))
    .range(d3.range(0, height, height / numrows));

  var row = svg.selectAll(".row")
    .data(data)
    .enter().append("g")
    .attr("class", "row")
    .attr("transform", function(d, i) {
      local.set(this, i);
      return "translate(0,"   y(i)   ")";
    });

  var cell = row.selectAll(".cell")
    .data(function(d) {
      return d;
    })
    .enter().append("g")
    .attr("class", "cell")
    .attr("transform", function(d, i) {
      return "translate("   x(i)   ", 0)";
    });

  cell.append('rect')
    .attr("width", rw)
    .attr("height", hw)
    .style("stroke", "black")
    .style("stroke-width", "2px")
    .style("fill", 'white')

  cell.append("text") //Add matrix elements
    .attr("dy", ".32em")
    .attr("x", rw / 2)
    .attr("y", hw / 2)
    .attr("text-anchor", "middle")
    .style("font-size", "14px")
    .transition() //Delay starts here
    .delay(function(d, i) {
      const p = local.get(this);
      return i * 1000   p * (1000 / numrows);
    })
    .text(function(d) {
      return d;
    })
  return;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

標籤：javascript d3.js

上一篇：在Djangorest框架中出現特定例外的情況下如何更改回應中收到的狀態碼

下一篇：RailsArel如何按選擇分組