使用 d3.js 创建热图，有颜色问题
我在这里有一个热图，我试图给它上色。现在它全是红色，但我想使用 d3.interpolateRdYlBu，我希望我的值较低的是蓝色，较高的是红色，所以我希望它很好地凝胶化。我知道它的读数正确，因为我的控制台中出现红色并且没有其他错误，但我没有做正确的事情，它没有考虑到我的价值并相应地做。任何帮助，将不胜感激！
<!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>
<!-- Load color palettes -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>
// set the dimensions and margins of the graph
var margin = {top: 80, right: 25, bottom: 30, left: 40},
width = 1000 - margin.left - margin.right,
height = 1000 - margin.top - margin.bottom;
// 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 + ")");
//Read the data
d3.csv("https://raw.githubusercontent.com/Nataliemcg18/Data/master/NASA_Surface_Temperature.csv", function(data) {
// Labels of row and columns -> unique identifier of the column called 'group' and 'variable'
var myGroups = d3.map(data, function(d){return d.group;}).keys()
var myVars = d3.map(data, function(d){return d.variable;}).keys()
// Build X scales and axis:
var x = d3.scaleBand()
.range([ 0, width ])
.domain(myGroups)
.padding(0.05);
svg.append("g")
.style("font-size", 15)
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickSize(0))
.select(".domain").remove()
// Build Y scales and axis:
var y = d3.scaleBand()
.range([ height, 0 ])
.domain(myVars)
.padding(0.05);
svg.append("g")
.style("font-size", 15)
.call(d3.axisLeft(y).tickSize(0))
.select(".domain").remove()
// Build color scale
var myColor = d3.scaleSequential()
.interpolator( d3.interpolateRdYlBu)
.domain([1,100])
江户川乱折腾1回答
-
当年话下
在您的色标中，您已将域设置为 [0,100]。但是，您的值介于 0 和 1.5 之间，并且您希望它们反转所以，这应该解决它： // Build color scale var myColor = d3.scaleSequential() .interpolator( d3.interpolateRdYlBu) .domain([1.3,0])为了更彻底，您可以使用 d3.max 和 d3.min 函数为您计算出最大最小值： var myColor = d3.scaleSequential() .interpolator( d3.interpolateRdYlBu) .domain([d3.max(data, d=>d.value),d3.min(data, d=>d.value)])这是一个具有此功能的 jsFiddle：https ://jsfiddle.net/x8zyud5t/
随时随地看视频慕课网APP
相关分类
JavaScript