Я включил легенду в свою Тепловую карту после этого примера , построенного с пороговой шкалой и Линейной шкалой для ее оси.Ось создается без проблем, проблема, я думаю, в коде, в который я добавляю элементы rect .Примечание: heatMap - это элемент svg .
Используемая версия библиотеки D3.js - D3.v5, на случай, если это уместно упомянуть.
function (dataset,xScale,yScale,heatMap,w,h,p,colorScale,colorDomain)
{
let variance = dataset.monthlyVariance.map(function(val){
return val.variance;
});
const legendColors= [0,1.4,2.8,5.2,6.6,8,9.4,10.8,12.2,13.6].map((n)=> colorScale(n));
const minTemp = dataset.baseTemperature + Math.min.apply(null, variance);
const maxTemp = dataset.baseTemperature + Math.max.apply(null, variance);
const legendDomain= ((min,max,len)=>
{
let arr= [];
let step=(max-min)/len;
for (let i=0; i<len; i++)
{
let eq=min+i*step;
arr.push(eq.toFixed(2));
}
return arr;
})(minTemp,maxTemp,legendColors.length);
//The legend scaling threshold
let threshold= d3.scaleThreshold()
.domain(legendDomain)
.range(legendColors);
//Legend's axis scaling
let legendBar= d3.scaleLinear()
.domain([minTemp,maxTemp])
.range([0,w/3]);
**//Legend's axis**
let legendAxis= d3.axisBottom(legendBar)
.tickSize(6)
.tickValues(threshold.domain())
.tickFormat(d3.format(".1f"));
//append legend's element
let legendEle= heatMap.append("g")
.attr("id","legend")
.classed("legend",true)
.attr("transform", `translate(62,${h-p.bottom+60})`);
//Map legend
legendEle.append("g")
.selectAll("rect")
.data(threshold.range().map(function(color){
let d = threshold.invertExtent(color);
if(d[0] == null) d[0] = legendBar.domain()[0];
if(d[1] == null) d[1] = legendBar.domain()[1];
return d;
}))
.enter()
.append('rect')
.attr('x',(d)=> legendAxis(d[0]))
.attr('y', 0)
.attr('width', (d)=> legendAxis(d[1])-legendAxis(d[0]))
.attr('height', 20)
.attr("fill", function(d) { return threshold(d[0]); });
//append legend's axis
legendEle.append("g").call(legendAxis);
//rect grid map
heatMap.selectAll("rect")
.data(dataset.monthlyVariance)
.enter()
.append("rect")
.attr("class","cell")
.attr('data-month',function(d){
return d.month;
})
.attr('data-year',function(d){
return d.year;
})
.attr('data-temp',function(d){
return dataset.baseTemperature + d.variance;
})
.attr('x', (d)=> xScale(d.year))
.attr('y', (d)=> yScale(d.month))
.attr("width", function(d,i){
return 5;
})
.attr("height", function(d,i){
return yScale.bandwidth(d.month);
})
.attr("fill", (d)=> colorScale(dataset.baseTemperature + d.variance))
.attr("transform", `translate(62,0)`);
}