D3 热图语法答案

【问题标题】：D3 Heatmap SyntaxD3 热图语法
【发布时间】：2021-06-14 02:08:07
【问题描述】：

所以，我的任务是帮助在网络环境中实现一些视觉效果。具体来说，我正在尝试使用 JS 中的 d3 从一个简单的虚拟矩阵构建一个热图，该矩阵表示来自 JSON 文件的小数据集。输入数据是这样的：

{"data":[[8,2],[5,4],[9,6]]}

那么，再次，您将如何使用 d3 在热图矩阵中可视化上述数据？

【问题讨论】：

你需要给出更详细的解释你到底想要什么。您想要什么热图以及基于什么参数颜色将在热图中定义.. json 数据的含义是什么
热图颜色的范围如下：['white', "#69b3a2"]
另外，对于这个数据，我打算将三行命名为 [a, b, c]，将两列命名为 [x,y]。这只是一个测试，因为我正在尝试构建一个简单的热图，以便以后制作更大的热图

标签： javascript json d3.js matrix

【解决方案1】：

抱歉耽搁了。

希望下面的代码有所帮助..

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<script>

// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 30, left: 30},
  width = 450 - margin.left - margin.right,
  height = 450 - margin.top - margin.bottom;
const data = {"data":[[8,2],[5,4],[9,6]]};
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.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 + ")");

// Labels of row and columns
var rows = [];
var cols = [];
var chartData = [];
data.data.forEach((item, i) => {
  if( i === 0) {
    item.forEach((itm , j) => {
      cols.push("col" + j);
      chartData.push({ row: "row" + i, col: "col" + j,value: itm});
    });
  } else {
     item.forEach((itm , j) => {
      chartData.push({ row: "row" + i, col: "col" + j, value: itm});
    });
  }
  rows.unshift("row" + i);
})


// Build X scales and axis:
var x = d3.scaleBand()
  .range([ 0, width ])
  .domain(cols)
  .padding(0.01);
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))

// Build X scales and axis:
var y = d3.scaleBand()
  .range([ height, 0 ])
  .domain(rows)
  .padding(0.01);
svg.append("g")
  .call(d3.axisLeft(y));

// Build color scale
var myColor = d3.scaleLinear()
  .range(["white", "#69b3a2"])
  .domain([1,100])
console.log(chartData);
//Read the data
  svg.selectAll()
      .data(chartData, function(d) {return d.row+':'+d.col;})
      .enter()
      .append("rect")
      .attr("x", function(d) { return x(d.col) })
      .attr("y", function(d) { return y(d.row) })
      .attr("width", x.bandwidth() )
      .attr("height", y.bandwidth() )
      .style("fill", function(d) { return myColor(d.value)} )


</script>

运行示例..working example link

【讨论】：

哇，看起来很棒。谢谢