낮 시간 히트 맵이 제대로 작동하지 않습니다.

d3js의 원래 예제가 약간 수정되어 필터 조건에 따라 csv 파일을 읽습니다. 오류가없고 출력이 없습니다. 실제 예제는 tsv 파일을 읽습니다.낮 시간 히트 맵이 제대로 작동하지 않습니다.

실제 예는 아래의 링크에 주어진다

<!DOCTYPE html> 
<meta charset="utf-8"> 
<html> 
    <head> 
    <style> 
     rect.bordered { 
     stroke: #E6E6E6; 
     stroke-width:2px; 
     } 

     text.mono { 
     font-size: 9pt; 
     font-family: Consolas, courier; 
     fill: red; 
     } 

     text.axis-workweek { 
     fill: #000; 
     } 

     text.axis-worktime { 
     fill: #000; 
     } 
    </style> 
    <script src="jquery-1.9.1.min.js"></script> 

    <script src="http://d3js.org/d3.v3.js"></script> 
    </head> 
    <body> 
    <div id="chart"></div> 

    <script type="text/javascript"> 

     var margin = { top: 50, right: 0, bottom: 00, left: 30 }, 
      width = 960 - margin.left - margin.right, 
      height = 1530 - margin.top - margin.bottom, 
      gridSize = Math.floor(width/24), 
      legendElementWidth = gridSize*2, 
      buckets = 9, 
      colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9] 
//   days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], 
      days = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'], 
      times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p", "12p"]; 


    d3.csv("ibs_sample (3).csv", function(error, csv){ 
    var data = []; 
    csv.filter(function(row){ 
    return row['AssetID']=='1001'; 


}) 

    console.log(csv); 
    csv.forEach(function(d) 
    { 
     // console.log(d); 
     return 
     { 
     var day =d.day, 
      hour= d.hour, 
      date =d.date, 
      value=d.value 
     }; 


    }, 
    function(error, data) { 
    //console.log(error); 
    console.log(data); 
      var colorScale = d3.scale.quantile() 
       .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })]) 
       .range(colors); 

    var svg = d3.select("#chart").append("svg") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

      var dayLabels = svg.selectAll(".dayLabel") 
       .data(days) 
       .enter().append("text") 
       .text(function (d) { return d; }) 
       .attr("x", 0) 
       .attr("y", function (d, i) { return i * gridSize; }) 
       .style("text-anchor", "end") 
       .attr("transform", "translate(-6," + gridSize/1.5 + ")") 
       .attr("class", function (d, i) { return ((i >= 0 && i <= 31) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); }); 

      var timeLabels = svg.selectAll(".timeLabel") 
       .data(times) 
       .enter().append("text") 
       .text(function(d) { return d; }) 
       .attr("x", function(d, i) { return i * gridSize; }) 
       .attr("y", 0) 
       .style("text-anchor", "middle") 
       .attr("transform", "translate(" + gridSize/2 + ", -6)") 
       .attr("class", function(d, i) { return ((i >= 0 && i <= 11) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); }); 

      var heatMap = svg.selectAll(".hour") 
       .data(data) 
       .enter().append("rect") 
       .attr("x", function(d) { return (d.hour - 1) * gridSize; }) 
       .attr("y", function(d) { return (d.date - 1) * gridSize; }) 
      // .attr("z", function(d) { return (d.date - 1) * gridSize; }) 
       .attr("rx", 4) 
       .attr("ry", 5) 
       .attr("class", "hour bordered") 
       .attr("width", gridSize) 
       .attr("height", gridSize) 
       .style("fill", colors[0]); 

      heatMap.transition().duration(1000) 
       .style("fill", function(d) { return colorScale(d.value); }); 

      heatMap.append("title").text(function(d) { return d.value; }); 

      var legend = svg.selectAll(".legend") 
       .data([0].concat(colorScale.quantiles()), function(d) { return d; }) 
       .enter().append("g") 
       .attr("class", "legend"); 

      legend.append("rect") 
      .attr("x", function(d, i) { return legendElementWidth * i; }) 
      .attr("y", height) 
      .attr("width", legendElementWidth) 
      .attr("height", gridSize/2) 
      .style("fill", function(d, i) { return colors[i]; }); 

     legend.append("text") 
      .attr("class", "mono") 
      .text(function(d) { return "≥ " + Math.round(d); }) 
      .attr("x", function(d, i) { return legendElementWidth * i; }) 
      .attr("y", height + gridSize); 



     }); 
     }); 







// }); 
    /*function(d){ 

    /* return { 
      day: +d.day, 
      hour:+d.hour, 
      date:+d.date, 
      value:+d.value 

      }; 


     }, 


     function(error, data) { 
      var colorScale = d3.scale.quantile() 
       .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })]) 
       .range(colors); 

      var svg = d3.select("#chart").append("svg") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

      var dayLabels = svg.selectAll(".dayLabel") 
       .data(days) 
       .enter().append("text") 
       .text(function (d) { return d; }) 
       .attr("x", 0) 
       .attr("y", function (d, i) { return i * gridSize; }) 
       .style("text-anchor", "end") 
       .attr("transform", "translate(-6," + gridSize/1.5 + ")") 
       .attr("class", function (d, i) { return ((i >= 0 && i <= 31) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); }); 

      var timeLabels = svg.selectAll(".timeLabel") 
       .data(times) 
       .enter().append("text") 
       .text(function(d) { return d; }) 
       .attr("x", function(d, i) { return i * gridSize; }) 
       .attr("y", 0) 
       .style("text-anchor", "middle") 
       .attr("transform", "translate(" + gridSize/2 + ", -6)") 
       .attr("class", function(d, i) { return ((i >= 0 && i <= 11) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); }); 

      var heatMap = svg.selectAll(".hour") 
       .data(data) 
       .enter().append("rect") 
       .attr("x", function(d) { return (d.hour - 1) * gridSize; }) 
       .attr("y", function(d) { return (d.date - 1) * gridSize; }) 
      // .attr("z", function(d) { return (d.date - 1) * gridSize; }) 
       .attr("rx", 4) 
       .attr("ry", 5) 
       .attr("class", "hour bordered") 
       .attr("width", gridSize) 
       .attr("height", gridSize) 
       .style("fill", colors[0]); 

      heatMap.transition().duration(1000) 
       .style("fill", function(d) { return colorScale(d.value); }); 

      heatMap.append("title").text(function(d) { return d.value; }); 

      var legend = svg.selectAll(".legend") 
       .data([0].concat(colorScale.quantiles()), function(d) { return d; }) 
       .enter().append("g") 
       .attr("class", "legend"); 

      legend.append("rect") 
      .attr("x", function(d, i) { return legendElementWidth * i; }) 
      .attr("y", height) 
      .attr("width", legendElementWidth) 
      .attr("height", gridSize/2) 
      .style("fill", function(d, i) { return colors[i]; }); 

     legend.append("text") 
      .attr("class", "mono") 
      .text(function(d) { return "≥ " + Math.round(d); }) 
      .attr("x", function(d, i) { return legendElementWidth * i; }) 
      .attr("y", height + gridSize); 
     });*/ 
     //}); 

    // }); 
    </script> 
    </body> 
</html>

CSV 형식 :

AssetID AssetType Year Month date day hour TempMin TempMax value Pressure 
1001 Chiller 2013 Jan 1 2 1 10 23 13 1654 
1001 Chiller 2013 Jan 1 2 2 11 24 13 1605 
1001 Chiller 2013 Jan 1 2 3 12 24 12 1146 
1001 Chiller 2013 Jan 1 2 4 13 24 11 1518 
1001 Chiller 2013 Jan 1 2 5 14 24 10 1486 
1001 Chiller 2013 Jan 1 2 6 15 24 9 1477 
1002 Boiler 2013 Jan 9 3 13 123 149 26 1482 
1002 Boiler 2013 Jan 9 3 14 111 153 42 1418 
1002 Boiler 2013 Jan 9 3 15 117 171 54 1447 
1002 Boiler 2013 Jan 9 3 16 118 156 38 1270 
1002 Boiler 2013 Jan 9 3 17 118 178 60 1159 
1002 Boiler 2013 Jan 9 3 18 121 159 38 1475

수있는 사람 검사

http://bl.ocks.org/tjdecke/5558084

수정 된 코드는 아래와 같이 주어진다 문제가 뭐야? tsv 또는 다른 이유 대신 csv 파일을 사용했기 때문입니까?

출처

2013-06-26 user2409375

은 아마, CSV 파일은 쉼표로 구분해야합니다하십시오 TSV 파일이 예상되는

그래서

AssetID,AssetType,Year,Month,date,day,hour,TempMin,TempMax,value,Pressure 
1001,Chiller,2013,Jan,1,2,1,10,23,13,1654

출처

2013-06-26 12:26:00 frkk

가 작동하지 않을 사용할 수 있나요? csv 값을 받아들이도록이 코드를 수정하도록 도와 줄 수 있습니까? – user2409375

낮 시간 히트 맵이 제대로 작동하지 않습니다.

답변

관련 문제