我在这里有一个热图，我试图给它上色。现在它全是红色，但我想使用 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 graphvar 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 pagevar 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 datad3.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 回答
当年话下
TA贡献1890条经验 获得超9个赞
在您的色标中，您已将域设置为 [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/
添加回答
举报
0/150
提交
取消