d3 js возникли проблемы с отображением оси и легенды - PullRequest
Новая
       27

d3 js возникли проблемы с отображением оси и легенды

1 голос
/ 13 апреля 2020

У меня проблема с блоком легенды, который просто отказывается от стиля в css.

Кроме того, линия x-Axis & Y-Axis внезапно перестала отображаться, и я не могу понять причину.

Мой код доступен в 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)
...