Question

我有一些非常简单的代码可以创建6x6相似矩阵。虽然我对结果感到满意，但我想在网格的每一行中添加文本（无休止小组）。我已经看过一些关于SO（以及其他相关内容）的优秀教程，这些教程可以将文本附加到图形上的各种元素上，但是还无法通过行和列找到与可视化相关的任何内容。我只是想在正确的方向上进行推动。

欢呼

var data = [ 
  [["Arsenal", 0.0], ["Chelsea", 0.6014876082652767], ["Liverpool", 0.5204181171517794],["ManchesterCity", 0.549210189254557], ["ManchesterUnited", 0.5440890632512689], ["Tottenham", 0.6304670189118691]],
  [["Arsenal",0.6014876082652767], ["Chelsea",0.0], ["Liverpool",0.5507313736526684],["ManchesterCity",0.5559069243804156], ["MancheserUnited",0.5231358671618266], ["Tottenham",0.6508134781353688]],
  [["Arsenal",0.5204181171517794], ["Chelsea",0.5507313736526684], ["Liverpool",0.0],["ManchesterCity",0.49759390310994533], ["MancheserUnited",0.4787550034617063], ["Tottenham",0.5749363562907429]],
  [["Arsenal",0.549210189254557], ["Chelsea",0.5559069243804156], ["Liverpool",0.49759390310994533],["ManchesterCity",0.0,], ["MancheserUnited",0.50215325905151], ["Tottenham",0.5802928689025063]],
  [["Arsenal",0.5440890632512689], ["Chelsea",0.5231358671618266], ["Liverpool",0.4787550034617063],["ManchesterCity",0.50215325905151], ["MancheserUnited",0.0], ["Tottenham",0.5497016431211542]],
  [["Arsenal",0.6304670189118691], ["Chelsea",0.6508134781353688], ["Liverpool",0.5749363562907429],["ManchesterCity",0.5802928689025063], ["MancheserUnited",0.5497016431211542], ["Tottenham",0.0]]
];

var teams = ["ARS", "CHE", "LIV", "MCI", "MUN", "TOT"]

var cols = data.length;
var rows = data.length;
var cellSize = 55;

var svg = d3.select("body")
    .append("svg")
    .attr("width", 600 )
    .attr("height", 500)

svg.selectAll("g")
    .data(data)
    .enter()
    .append("g")
    .attr("transform", function (d, i) {
      return "translate(" + i * cellSize + ")"
    })
    .selectAll("rect")
    .data(function(d) {return d;})
    .enter()
    .append("rect")
    .attr("fill", function(d) {
        if (d[1] == 0) {
            return "#2A363B";
        } else if (d[1] <= 0.50) {
            return "#F8B195";
        } else if (d[1] <= 0.55) {
            return "#F67280";
        } else if (d[1] <= 0.59) {
            return "#C06C84";
        } else if (d[1] <= 0.62) {
            return "#6C5B7B";
        } else if (d[1] >= 0.63) {
            return "#355C7D";
        }})
    .attr("x", 100)
    .attr("y", function(d, i) {
      return i * cellSize ;
    })
    .attr("width", 50)
    .attr("height", 50)
    .attr("r", 55);

Answer 1

data矩阵的每个内部数组都包含行的正确数据。您可以使用任何内部矩阵，例如第一个：

.data(data[0])

然后，它只是使用一些魔术数字（应避免使用...）来定位文本：

var labels = svg.selectAll(null)
    .data(data[0])
    .enter()
    .append("text")
    .attr("x", 440)
    .attr("y", function(_,i){
        return cellSize/2 + i * cellSize
    })
    .text(function(d){
        return d[0]
    });

这是一个演示：

var data = [
  [
    ["Arsenal", 0.0],
    ["Chelsea", 0.6014876082652767],
    ["Liverpool", 0.5204181171517794],
    ["ManchesterCity", 0.549210189254557],
    ["ManchesterUnited", 0.5440890632512689],
    ["Tottenham", 0.6304670189118691]
  ],
  [
    ["Arsenal", 0.6014876082652767],
    ["Chelsea", 0.0],
    ["Liverpool", 0.5507313736526684],
    ["ManchesterCity", 0.5559069243804156],
    ["MancheserUnited", 0.5231358671618266],
    ["Tottenham", 0.6508134781353688]
  ],
  [
    ["Arsenal", 0.5204181171517794],
    ["Chelsea", 0.5507313736526684],
    ["Liverpool", 0.0],
    ["ManchesterCity", 0.49759390310994533],
    ["MancheserUnited", 0.4787550034617063],
    ["Tottenham", 0.5749363562907429]
  ],
  [
    ["Arsenal", 0.549210189254557],
    ["Chelsea", 0.5559069243804156],
    ["Liverpool", 0.49759390310994533],
    ["ManchesterCity", 0.0, ],
    ["MancheserUnited", 0.50215325905151],
    ["Tottenham", 0.5802928689025063]
  ],
  [
    ["Arsenal", 0.5440890632512689],
    ["Chelsea", 0.5231358671618266],
    ["Liverpool", 0.4787550034617063],
    ["ManchesterCity", 0.50215325905151],
    ["MancheserUnited", 0.0],
    ["Tottenham", 0.5497016431211542]
  ],
  [
    ["Arsenal", 0.6304670189118691],
    ["Chelsea", 0.6508134781353688],
    ["Liverpool", 0.5749363562907429],
    ["ManchesterCity", 0.5802928689025063],
    ["MancheserUnited", 0.5497016431211542],
    ["Tottenham", 0.0]
  ]
];

var teams = ["ARS", "CHE", "LIV", "MCI", "MUN", "TOT"]

var cols = data.length;
var rows = data.length;
var cellSize = 55;

var svg = d3.select("body")
  .append("svg")
  .attr("width", 600)
  .attr("height", 500)

svg.selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function(d, i) {
    return "translate(" + i * cellSize + ")"
  })
  .selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter()
  .append("rect")
  .attr("fill", function(d) {
    if (d[1] == 0) {
      return "#2A363B";
    } else if (d[1] <= 0.50) {
      return "#F8B195";
    } else if (d[1] <= 0.55) {
      return "#F67280";
    } else if (d[1] <= 0.59) {
      return "#C06C84";
    } else if (d[1] <= 0.62) {
      return "#6C5B7B";
    } else if (d[1] >= 0.63) {
      return "#355C7D";
    }
  })
  .attr("x", 100)
  .attr("y", function(d, i) {
    return i * cellSize;
  })
  .attr("width", 50)
  .attr("height", 50);

var labels = svg.selectAll(null)
  .data(data[0])
  .enter()
  .append("text")
  .attr("x", 440)
  .attr("y", function(_, i) {
    return cellSize / 2 + i * cellSize
  })
  .text(function(d) {
    return d[0]
  })

<script src="https://d3js.org/d3.v5.min.js"></script>

将文本追加到行和列

1 个答案: