Comment faire une échelle de couleurs en D3 JS pour les utiliser dans l'attribut de suffisance?
Je fais une carte de chaleur en D3 JS avec l'Année le long de l'axe des X et le Mois le long de l'axe. Chaque cellule est une température et obtient un autre "remplissage" de la couleur sur cette base. Ma question est comment puis-je faire une échelle de couleurs qui mappe un minTemp/maxTemp de domaine avec une gamme de codes de couleur. J'ai le code ci-dessous jusqu'à présent, mais cela ne fonctionne pas:
var url = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json"
d3.json(url, function(json){
//load data from API and save in variable data
var data = json.monthlyVariance;
var baseTemp = json.baseTemperature;
//Add temperature to each object in data set
for(var i = 0; i < data.length; i++){
var temperature = baseTemp + data[i].variance
data[i].temperature = temperature;
var monthString = "";
switch(data[i].month){
case 1:
data[i].monthString = "January";
break;
case 2:
data[i].monthString = "February";
break;
case 3:
data[i].monthString = "March";
break;
case 4:
data[i].monthString = "April";
break;
case 5:
data[i].monthString = "May";
break;
case 6:
data[i].monthString = "June";
break;
case 7:
data[i].monthString = "July";
break;
case 8:
data[i].monthString = "August";
break;
case 9:
data[i].monthString = "September";
break;
case 10:
data[i].monthString = "October";
break;
case 11:
data[i].monthString = "November";
break;
case 12:
data[i].monthString = "December";
break;
}
}
//Set dimensions of div container, svg, and chart area(g element)
var margin = {top: 20, right: 40, bottom: 40, left: 80};
//Width of the chart, within SVG element
var w = 1000 - margin.left - margin.right;
//Height of the chart, within SVG element
var h = 500 - margin.top - margin.bottom;
//Create SVG element and append to #chart div container
var svg = d3.select("#chart")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//Get Min Max values
var maxYear = d3.max(data, function(d){
return d.year;
});
var minYear = d3.min(data, function(d){
return d.year;
});
var maxTemp = d3.max(data, function(d){
return d.temperature;
});
var minTemp = d3.min(data, function(d){
return d.temperature;
})
//Create X scale, axis and label
var xScale = d3.scaleLinear()
.domain([minYear, maxYear])
.range([0,w]);
var xAxis = d3.axisBottom()
.scale(xScale)
.ticks(20)
.tickFormat(d3.format("d"));
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
//Create Y scale, axis and label
var cellHeight = (h / 12);
var yRange = [];
for(var i = 0; i < 12 ; i++){
yRange.push(i * cellHeight);
}
var yScale = d3.scaleOrdinal()
.domain(["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"])
.range(yRange);
var yAxis = d3.axisLeft()
.scale(yScale)
.ticks(12);
svg.append("g")
//append a g element
.attr("class", "axis")
.call(yAxis)
//call yAxis function on this g element
.selectAll(".tick text")
//select all elements with class tick and nested text element
.attr("transform", "translate(0," + (cellHeight/2) + ")");
//move all text elements half a cell height down
//Create color scale
var colors = d3.scaleOrdinal()
.domain([minTemp,maxTemp])
.range(["#5E4FA2", "#3288BD", "#66C2A5", "#ABDDA4", "#E6F598", "#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", "#D53E4F", "#9E0142"]);
//Select all rect elements in G container element, bind data and append
var cells = svg.selectAll("cells")
.data(data)
.enter()
.append("rect");
var cellAttributes = cells
.attr("x", function(d){
return xScale(d.year);
})
.attr("y", function(d){
return yScale(d.monthString);
})
.attr("width", w/(maxYear-minYear))
.attr("height", h/12)
.attr("fill", function(d){
return colors(d);
})
.attr("class", "cell");
});Je pourrais écrire un long if/else dans le remplissage de l'attribut de fonction, carte de la température à un code de couleur, mais ce n'est pas le "D3 façon" je trouve. Comment puis-je le faire avec une échelle?:
var colors = d3.scaleOrdinal()
.domain([minTemp,maxTemp])
.range(["#5E4FA2", "#3288BD", "#66C2A5", "#ABDDA4", "#E6F598", "#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", "#D53E4F", "#9E0142"]);
Vous r à l'aide de l'échelle ordinale, de sorte que le code ci-dessus fais pour u.Je sais que l'exigence plus précisément.
OriginalL'auteur chemook78 | 2017-01-25
Vous devez vous connecter pour publier un commentaire.
merci beaucoup pour l'aide, voici comment j'ai finalement fait:
démo: http://codepen.io/chemok78/full/qRXmWX/
OriginalL'auteur chemook78