0

d3js 中的原始示例稍作修改，以根据过滤条件读取 csv 文件。没有错误，没有输出。实际示例读取一个 tsv 文件。

实际示例在以下链接中给出：

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

修改后的代码如下：

<!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

有人可以检查一下问题是什么吗？是因为使用 csv 文件而不是 tsv 还是其他原因。？

4

1 回答 1

0

可能，您的 csv 文件必须用逗号分隔：

AssetID,AssetType,Year,Month,date,day,hour,TempMin,TempMax,value,Pressure
1001,Chiller,2013,Jan,1,2,1,10,23,13,1654
于 2013-06-26T12:26:00.957 回答