d3js在显示轴和图例时遇到问题

Question

我遇到了图例框问题，图例框只是拒绝在CSS中设置样式。

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

我的代码位于https://codepen.io/gladiator_kris/pen/eYpNgJQ?editors=0010

//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)