个人中心
gpt4 book ai didi

javascript - 日历热图 : how to define the range of % for each color instead of using quantiles

转载 作者：太空宇宙 更新时间：2023-11-04 16:12:10 25 4
gpt4 key购买 nike

我正在使用 D3 创建日历热图。

这是我当前的代码:

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

      text.mono {
        font-size: 10pt;
        font-family: Consolas, courier;
        fill: #000;
      }

      text    {
        font-family: Consolas, courier;
        font-size:1.0em;
      }

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

      text.axis-worktime {
        fill: #000;
      }
    </style>
    <script src="http://d3js.org/d3.v3.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    </div>
    <script type="text/javascript">
     var title="";
      var margin = { top: 90, right: 0, bottom: 80, left: 30 },
          width = 960 - margin.left - margin.right,
          height = 900 - margin.top - margin.bottom,
          gridSize = Math.floor(width / 42),
          legendElementWidth = gridSize*2,
          buckets = 5,
          colors = ["#c7e9b4","#41b6c4","#1d91c0","#225ea8"], // alternatively colorbrewer.YlGnBu[9]
          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 = ["7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00"];
          datasets = ["data.tsv"];

      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 + ")");

      svg.append("text")
        .attr("x",0)
        .attr("y",-40)
        .text(title);

      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 <= 4) ? "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 * 2.1; })
            .attr("y", 0)
            .style("text-anchor", "middle")
            .attr("transform", "translate(" + gridSize / 2 + ", -6)")
            .attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); });

      var heatmapChart = function(tsvFile) {
        d3.tsv(tsvFile,
        function(d) {
          return {
            day: +d.day,
            hour: +d.hour,
            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 cards = svg.selectAll(".hour")
              .data(data, function(d) {return d.day+':'+d.hour;});

          cards.append("title");

          cards.enter().append("rect")
              .attr("x", function(d) { return (d.hour - 7) * gridSize * 2.05; })
              .attr("y", function(d) { return (d.day - 1) * gridSize; })
              .attr("rx", 4)
              .attr("ry", 4)
              .attr("class", "hour bordered")
              .attr("width", gridSize*2)
              .attr("height", gridSize)
              .style("fill", colors[0]);

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

          cards.select("title").text(function(d) { return d.value; });

          cards.exit().remove();

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

          legend.enter().append("g")
              .attr("class", "legend");

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

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

          legend.exit().remove();

        });  
      };

      heatmapChart(datasets[0]);

    </script>
  </body>
</html>

这就是结果:

enter image description here

如何手动定义每种颜色的 % 范围？特别是，由于使用分位数，4% 和 52% 之间存在很大差距 (.data([0].concat(colorScale.quantiles()), function(d) { return d; })。我想设置 >0%, >5%, >10%, >15%，>20%，>25%。

示例数据集(data.tsv):

day hour    value
1   7   0
1   8   22.6829268293
1   9   24.3243243243
1   10  23.3374766936
1   11  21.8156028369
1   12  21.8499851765
1   13  22.1323529412
1   14  19.8275862069
1   15  20.4545454546
1   16  23.7329042638
1   17  23.1717337716
1   18  20.1895734597
1   19  22.7552275523
1   20  22.6277372263
1   21  19.7278911564
2   7   0
2   8   24.1124260355
2   9   25.0368912936
2   10  23.8484398217
2   11  23.6625514403
2   12  23.5748436925
2   13  23.3272227315
2   14  21.8181818182
2   15  20.3499079189
2   16  20.7635009312
2   17  26.4220183486
2   18  21.8934911243
2   19  19.8433420366
2   20  19.8614318706
2   21  24.6031746031

最佳答案

您可以使用阈值比例:

Threshold scales are similar to quantize scales, except they allow you to map arbitrary subsets of the domain to discrete values in the range. The input domain is still continuous, and divided into slices based on a set of threshold values. The input domain is typically a dimension of the data that you want to visualize, such as the height of students (measured in meters) in a sample population. The output range is typically a dimension of the desired output visualization, such as a set of colors (represented as strings).

但请注意这一点:

If the number of values in the scale's range is N + 1, the number of values in the scale's domain must be N. If there are fewer than N elements in the domain, the additional values in the range are ignored.

这意味着，在您的情况下，由于 colors 数组有 4 个值，因此域只能有三个任意值:

 var colorScale = d3.scale.threshold()
     .domain([value1, value2, value3])
     .range(colors);

使用您想要的百分比设置这些值。

关于javascript - 日历热图 : how to define the range of % for each color instead of using quantiles，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41377199/

25 4 0
文章推荐： Jquery 和 animate，无法正确更改类
文章推荐： c++ - 支持空初始化列表的高效对象构造
文章推荐： css - 如何更正复选框位置，当它与 jQuery UI 输入文本在同一页面时？
文章推荐： c++ - 如何检查 std::vector 何时将状态从空更改为非空，反之亦然？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com