Блог

Я включил легенду в свою тепловую карту, следуя этому примеру, построенному с использованием порогового масштаба и линейного масштаба для его оси. Ось создается без проблем, проблема, я полагаю, в коде, куда я добавляю ее элементы rect. Примечание: Тепловая карта является элементом svg.

The 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)`);
    }