D3.js d3js在显示轴时出现问题&；传说

我面临着图例框的问题，它只是拒绝在css中设置样式

另外，x轴和y轴的直线突然停止显示&我无法理解原因

我的代码可在

//图例
var数组=[]；
对于（变量i=1；i d）

//legend

  var array = [];
  for (var i=1; i<=11; i++){
    array.push(minTemp + diff*i);
    };

  var legendContainer = svg.append("rect")
                           .attr("class", "legend")
                           .attr("id", "legend")
                           .attr("width", 300)
                           .attr("height", 60)
                           .attr('transform', `translate(${padding.left}, ${height-padding.bottom+30})`) 

  const legendScale = d3.scaleLinear()
                      .domain(array)
                      .range(gradientt);

  const legendXaxis = d3.axisBottom(legendScale).tickFormat(d3.format("+.1f"))

  const axisLegend = d3.select("#legend").append("g")
                       .call(legendXAxis)

   const legendrect = d3.select("#legend").selectAll("rect")
                      .data(gradient)
                      .enter()
                      .append("rect")
                      .attr("width",20)
                      .attr("height",20)
                      .attr("x",0)
                      .attr("y",0)
                      .style("fill", (d) => d)