히트 맵이 제대로 나타나지 않는 이유는 무엇입니까?

Question

상황의 이미지 :

---

상황 :

내 히트 맵 D3.js 그래프가 제대로 표시되지 않습니다.

내가 잘못 했습니까?

콘솔에 0 개의 오류가 있습니다.

버그를 찾을 수 없습니다. 그것은 아마 명백한 시야에 숨겨진 무언가 일 것입니다.

---

는 CODE : 여기

  <script type="text/javascript"> 
    d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json", function(error, json) { 
     if (error) { 
      return console.warn(error); 
     } 
     visualizeThe(json); 
    }); 

    function visualizeThe(data) { 

     const baseTemperature = data.baseTemperature; 
     const tempData = data.monthlyVariance; 

     const margin = { 
      top: 10, 
      right: 85, 
      bottom: 45, 
      left: 0 
     } 

     const w = 1100 - margin.left - margin.right; 
     const h = 500 - margin.top - margin.bottom; 
     const barWidth = Math.ceil(w/tempData.length); 

     const colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]; 
     const buckets = colors.length; 
     const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 

     const minTime = d3.min(tempData, (d) => new Date(d.year,1,1,0,0)); 
     const maxTime = d3.max(tempData, (d) => new Date(d.year,1,1,0,0)); 

     const xScale = d3.scaleTime() 
      .domain([minTime, maxTime])  
      .range([0, w]); 

     const xAxis = d3.axisBottom(xScale).ticks(20); 

     const svg = d3.select("#results") 
      .append("svg") 
      .attr("width", w + margin.left + margin.right) 
      .attr("height", h + margin.top + margin.bottom); 

     const div = d3.select("body") 
      .append("div") 
      .attr("class", "tooltip")    
      .style("opacity", 0); 

     svg.append("g") 
      .attr("transform", "translate(70," + (h+margin.top) + ")") 
      .call(xAxis); 

     const monthsLabels = svg.selectAll("monthLabel") 
      .data(months) 
      .enter() 
      .append("text") 
      .text((d) => d) 
      .attr("x", 100) 
      .attr("y", (d,i) => i * h/12 + 30) 
      .style("text-anchor", "end") 
      .attr("transform", "translate(-40," +0+ ")") 
      .style("font-size", 10); 

     const colorScale = d3.scaleQuantile() 
      .domain([0, buckets - 1, d3.max(tempData, (d) => d.variance + baseTemperature)]) 
      .range(colors); 

     const heatMap = svg.selectAll("month") 
      .data(tempData, (d) => d) 
      .enter() 
      .append("rect") 
      .attr("x", (d,i) => i * barWidth + 60) 
      .attr("y", (d) => d.month * h/12 - 440) 
      .attr("width", barWidth) 
      .attr("height", h/12) 
      .style("fill", colors[0]); 

     heatMap.transition() 
      .duration(1000) 
      .style("fill", (d) => colorScale(d.variance + baseTemperature)); 


//   heatMap.exit().remove(); 



     svg.append("text")    
      .attr("transform", 
       "translate(" + (w/2) + " ," + 
       (h+ margin.top + 45) + ")") 
      .style("text-anchor", "middle") 
      .text("Years"); 

     svg.append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", -5) 
      .attr("x",0 - (h/2)) 
      .attr("dy", "1em") 
      .style("text-anchor", "middle") 
      .text("Months");  
    } 

</script> 

Answer 1

문제점 지금까지 :

이

1. 귀하의 엑스 스케일 범위가 잘못, 그것이 있어야 :

   .range([margin.left, w]); 
   

2. 당신은 x 축의 x 위치를 하드 코딩된다

3. 사각형의 y 위치가 잘못된 마법 번호입니다.

4. 당신은 당신의 사각형의 위치에 대한 엑스 스케일을 사용할 수 있습니다

   .attr("x", (d) => xScale(new Date(d.year,1,1,0,0))) 
   

좋은 생각이 여기 날짜로 d.year를 변환하는 파서를 작성하고 있지만.

또한 사각형의 너비를 1px에서 2px로 늘리고 있습니다. 나는 문제가`svg.selectAll ("달")`가 아무것도 선택하지 않는 한으로 생각 https://codepen.io/anon/pen/mmONrK?editors=1000

Answer 2

당신은 이동 : https://codepen.io/anon/pen/qmqeWR

선은 내가 변경 :이 정확하지 않을 수 있음을

가

.attr("x", (d,i) => (i-d.month) * barWidth + 70) 
.attr("y", (d) => (d.month * h/12 -30)) 
.attr("width", barWidth*12) 

주 (즉, 올바른 데이터는 정확한 연도와 일치하지 않을 수 있습니다.) 어떻게 설정했는지 확인하십시오. 나는 차트를 보여줄 때까지 그걸 가지고 놀랐다. 여기에서 디버깅 할 수있다.