个人中心
gpt4 book ai didi

javascript - 替代 d3.scaleQuantize？

转载 作者：行者123 更新时间：2023-11-30 11:32:50 26 4
gpt4 key购买 nike

我是 d3 图表的新手。

我们目前正在根据 d3 Calendar View 创建图表.

我遇到的问题是颜色。它使用 d3.scaleQuantize()，它显然按颜色数划分域，然后为每个部分分配一种颜色。换句话说，每种颜色都有相同的范围。

所以在下面的例子中，1&2 是蓝色，3&4 是黑色，5&6 是红色，7&8 是黄色，9&10 是绿色。

var color = d3.scaleQuantize()
.domain([1,10])
.range(["Blue", "Black", "Red", "Yellow", "Green"]);

在我们的特定情况下，我需要根据范围设置颜色。例如，介于 1 和 3 之间的是蓝色，4 和 6 是黑色，超过 6 的是红色。

这可能吗？

谢谢。

我将所有代码作为引用:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script>

var url_string = window.location.href;
var url = new URL(url_string);
var Cell = url.searchParams.get("Cell");

var width = 960,
  height = 136,
  cellSize = 17;

var color = d3.scaleQuantize()
  .domain([0, 10])
  .range(["Blue", "Black", "Red", "Yellow", "Green"]);

var dateFormat = d3.timeFormat("%Y-%m-%d");

var svg = d3.select("body")
  .selectAll("svg")
  .data(d3.range(2017, 2018))
  .enter().append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");

var rect = svg.append("g")
  .attr("fill", "none")
  .attr("stroke", "#ccc")
  .selectAll("rect")
  .data(function(d) {
    return d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1));
  })
  .enter().append("rect")
  .attr("width", cellSize)
  .attr("height", cellSize)
  .attr("x", function(d) {
    return d3.timeWeek.count(d3.timeYear(d), d) * cellSize;
  })
  .attr("y", function(d) {
    return d.getDay() * cellSize;
  })
  .datum(dateFormat);

svg.append("g")
  .attr("fill", "none")
  .attr("stroke", "#000")
  .selectAll("path")
  .data(function(d) {
    return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1));
  })
  .enter().append("path")
  .attr("d", pathMonth);

var url = "http://Server/Service1.svc/GetData/" + Cell;

d3.json(url, function(error, data) {
  //populating data since i don't have the file

  var nest = d3.nest()
    .key(function(d) {
      return d.datekey;
    })
    .map(data);

    rect.filter(function(d) {
      return ("$" + d) in nest;
    })
    .attr("fill", function(d) { 
      return color(nest[("$" + d)][0].Sales);
    })
});

function pathMonth(t0) {
  var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
    d0 = t0.getDay(),
    w0 = d3.timeWeek.count(d3.timeYear(t0), t0),
    d1 = t1.getDay(),
    w1 = d3.timeWeek.count(d3.timeYear(t1), t1);
  return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize +
    "H" + w0 * cellSize + "V" + 7 * cellSize +
    "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize +
    "H" + (w1 + 1) * cellSize + "V" + 0 +
    "H" + (w0 + 1) * cellSize + "Z";
}
</script>

最佳答案

供引用:

如果缩放功能这么简单，自动创建轴/图例不需要，可以简单地自己写一个功能。所以在这种情况下，这可能看起来像这样:

function scale(x) { 
  switch(true){ 
    case x<=3: return "blue"; 
    case x<=6: return "black"; 
    default:   return "green"; 
  } 
}

请注意，缩放函数只是将您的“测量”值映射到显示值。有时不需要 d3 的更复杂的功能。

关于javascript - 替代 d3.scaleQuantize？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45639414/

26 4 0
文章推荐： Javascript DomParser 忽略/抑制解析错误
文章推荐： java - 在 GAE Java 开发服务器上没有未申请的工作的 HRD
文章推荐： ios - 如何使用 YouTube API 获取相关/最新的下一个视频？ (iOS)
文章推荐： java - 带有 list 文件的 Android 元数据 - nullPointerException
行者123
个人简介

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

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