為什么我的代碼沒有得到熱圖？

Question

我試圖用給定的值創建一個熱圖。 但是玩完之后，它給了我一個 Rectangels。 通常，必須用不同顏色的矩形填充整個圖形。 我的代碼有什么問題？ 我已經嘗試了很多東西。 但不幸的是，我不知道該怎么辦，我已經絕望了。

在這張圖片中，您可以看到我的版本是什么樣子：

在此處輸入圖像描述

這是我的代碼：

<!DOCTYPE html>
<meta charset="utf-8" />
<title>test</title>
<style>
  body {
    margin: 50px;
    font-family: Arial;
  }
</style>
<body>
  <p>First Tutorial</p>
  <script src="https://d3js.org/d3.v6.js"></script>
  <div id="container"> </id>
  <script>

    /* JavaScript */
    var data = [
      [2.56, 8.52, 4.92, 2.58, 8.44, 2.29],
      [7.94, 8.42, 7.71, 7.0, 8.13, 5.63],
      [1.38, 3.29, 2.38, 2.85, 1.38, 1.77],
      [1.31, 2.48, 1.04, 1.21, 1.83, 1.48],
      [1.58, 8.19, 4.75, 3.38, 4.83, 1.46],
      [4.48, 4.08, 4.13, 1.73, 1.37, 2.58], ];

    var rowLabels = [
      "rowOne",
      "rowTwo",
      "rowThree",
      "rowFour",
      "rowFive",
      "rowSix",
    ];
    var columnLabels = [
      "columnOne",
      "columnTwo",
      "columnThree",
      "columnFour",
      "columnFive",
      "columnSix",
    ];

    const mapData = data.reduce((res, item, index) => {
      const group = rowLabels[index];
      item.forEach((value, colIndex) => {
        res.min = Math.min(value, res.min);
        res.max = Math.max(value, res.max);
        res.data.push({group, variable: columnLabels[colIndex], value});
      });
      return res;
    }, {data: [], min: Number.POSITIVE_INFINITY, max: Number.NEGATIVE_INFINITY});

    /* Layout constants */
    var margin = {top: 0, right:0, bottom: 90, left: 80},
      width = 960- margin.left - margin.right,
      height = 600 - margin.top - margin.bottom;

    /* Initialization of SVG graphics */
    var svg = d3.select("#container")
    .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 + ")");

      //X Scale and Axis:
      var x= d3.scaleBand()
      .range([ 0, width ])
      .domain(columnLabels)
      .padding(0.01);
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
      .selectAll("text")
      .attr("transform", "translate(-10,10) rotate(-45)")
      .style("text-anchor", "end")
      .style("font-size", 10)
    
    // Y scales and Axis:
    var y= d3.scaleBand()
      .range([ height, 0 ])
      .domain(rowLabels)
      .padding(0.01);
    svg.append("g")
      .call(d3.axisLeft(y))

      var myColor = d3.scaleLinear()
  .range(["#0000ff", "#00ff00"])
  .domain([mapData.min,mapData.max])

  svg.selectAll()
      .data(mapData.data, function(d) {return d.group+':'+d.variable;})
      .enter()
      .append("rect")
      .attr("x", function(d) { return x(d.group) })
      .attr("y", function(d) { return y(d.variable) })
      .attr("width", x.bandwidth() )
      .attr("height", y.bandwidth() )
      .style("fill", function(d) { return myColor(d.value)} )

  </script>
</body>

Answer 1

代替

.attr("x", function(d) { return x(d.group) })
.attr("y", function(d) { return y(d.variable) })

和：

.attr("x", function(d) { return x(d.variable) })
.attr("y", function(d) { return y(d.group) })

 /* JavaScript */ var data = [ [2.56, 8.52, 4.92, 2.58, 8.44, 2.29], [7.94, 8.42, 7.71, 7.0, 8.13, 5.63], [1.38, 3.29, 2.38, 2.85, 1.38, 1.77], [1.31, 2.48, 1.04, 1.21, 1.83, 1.48], [1.58, 8.19, 4.75, 3.38, 4.83, 1.46], [4.48, 4.08, 4.13, 1.73, 1.37, 2.58]]; var rowLabels = [ "rowOne", "rowTwo", "rowThree", "rowFour", "rowFive", "rowSix", ]; var columnLabels = [ "columnOne", "columnTwo", "columnThree", "columnFour", "columnFive", "columnSix", ]; const mapData = data.reduce((res, item, index) => { const group = rowLabels[index]; item.forEach((value, colIndex) => { res.min = Math.min(value, res.min); res.max = Math.max(value, res.max); res.data.push({group, variable: columnLabels[colIndex], value}); }); return res; }, {data: [], min: Number.POSITIVE_INFINITY, max: Number.NEGATIVE_INFINITY}); /* Layout constants */ var margin = {top: 0, right:0, bottom: 90, left: 80}, width = 960- margin.left - margin.right, height = 600 - margin.top - margin.bottom; /* Initialization of SVG graphics */ var svg = d3.select("#container").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 + ")"); //X Scale and Axis: var x= d3.scaleBand().range([ 0, width ]).domain(columnLabels).padding(0.01); svg.append("g").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x)).selectAll("text").attr("transform", "translate(-10,10) rotate(-45)").style("text-anchor", "end").style("font-size", 10) // Y scales and Axis: var y= d3.scaleBand().range([ height, 0 ]).domain(rowLabels).padding(0.01); svg.append("g").call(d3.axisLeft(y)) var myColor = d3.scaleLinear().range(["#0000ff", "#00ff00"]).domain([mapData.min,mapData.max]) console.log(mapData); //console.log() svg.selectAll().data(mapData.data, function(d) {return d.group+':'+d.variable;}).enter().append("rect").attr("x", function(d) { return x(d.variable) }).attr("y", function(d) { return y(d.group) }).attr("width", x.bandwidth() ).attr("height", y.bandwidth() ).style("fill", function(d) { return myColor(d.value)} )

 body { margin: 50px; font-family: Arial; }

 <script src="https://d3js.org/d3.v6.js"></script> <div id="container">

為什么我的代碼沒有得到熱圖？

問題描述

1 個解決方案

解決方案1
0 已采納 2021-05-08 19:30:51

為什么我的代碼沒有得到熱圖？

問題描述

1 個解決方案

解決方案1 0 已采納 2021-05-08 19:30:51

解決方案1
0 已采納 2021-05-08 19:30:51