热图 js 最小值 0

Question

我正在尝试使用 'heatmap js' 库绘制热图。对于某些输入值，如果最小值为 0，最大值为 1，则整个热图将为红色，而不是绘制实际值。如果最大值不是 1（例如最小值：0，最大值 2 或 min:0，最大值：3），它工作正常，但仅在这种情况下，热图无法映射数据。

var data = null;



/* this set of data works fine though */
values = [{
    "uid": "1",
    "x": 100,
    "y": 200,
    "value": 0
  },
  {
    "uid": "2",
    "x": 100,
    "y": 220,
    "value": 0
  },
  {
    "uid": "22",
    "x": 100,
    "y": 240,
    "value": 0
  },
  {
    "uid": "30",
    "x": 100,
    "y": 260,
    "value": 0
  },
  {
    "uid": "39",
    "x": 100,
    "y": 280,
    "value": 0
  },
  {
    "uid": "70",
    "x": 100,
    "y": 300,
    "value": 1
  },
  {
    "uid": "75",
    "x": 120,
    "y": 200,
    "value": 0
  },
  {
    "uid": "84",
    "x": 140,
    "y": 200,
    "value": 1
  },
  {
    "uid": "85",
    "x": 160,
    "y": 200,
    "value": 1
  },
  {
    "uid": "104",
    "x": 180,
    "y": 200,
    "value": 0
  },
  {
    "uid": "105",
    "x": 200,
    "y": 200,
    "value": 0
  }
];


var heatmap = h337.create({
  container: $("#testcanvas").get(0)
});
data = {
  max: 1,
  min: 0,
  data: values
}
heatmap.setData(data);

heatmap.repaint();

#testcanvas {
  width: 600px;
  height: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script>
<div id="testcanvas"></div>

Answer 1

如果我对你的问题的理解正确，那么我猜脚本理解 0 = false 和 1 = true 所以你需要将 0 传递为“0”，将 1 传递为“1”

var data = null;



/* this set of data works fine though */
values = [{
    "uid": "1",
    "x": 100,
    "y": 200,
    "value": "0"
  },
  {
    "uid": "2",
    "x": 100,
    "y": 220,
    "value": "0"
  },
  {
    "uid": "22",
    "x": 100,
    "y": 240,
    "value": "0"
  },
  {
    "uid": "30",
    "x": 100,
    "y": 260,
    "value": "0"
  },
  {
    "uid": "39",
    "x": 100,
    "y": 280,
    "value": "0"
  },
  {
    "uid": "70",
    "x": 100,
    "y": 300,
    "value": "1"
  },
  {
    "uid": "75",
    "x": 120,
    "y": 200,
    "value": "0"
  },
  {
    "uid": "84",
    "x": 140,
    "y": 200,
    "value": "1"
  },
  {
    "uid": "85",
    "x": 160,
    "y": 200,
    "value": "1"
  },
  {
    "uid": "104",
    "x": 180,
    "y": 200,
    "value": "0"
  },
  {
    "uid": "105",
    "x": 200,
    "y": 200,
    "value": "0"
  }
];


var heatmap = h337.create({
  container: $("#testcanvas").get(0)
});
data = {
  max: "1",
  min: "0",
  data: values
}
heatmap.setData(data);

heatmap.repaint();

#testcanvas {
  width: 600px;
  height: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script>
<div id="testcanvas"></div>

热图 js 最小值 0

Heatmap js min value 0

javascript

heatmap

d3heatmap