Javascript d3.scaleQuantize的替代方案？_Javascript_D3.js

Javascript d3.scaleQuantize的替代方案？

javascript d3.js

Javascript d3.scaleQuantize的替代方案？,javascript,d3.js,Javascript,D3.js,我不熟悉d3图表我们目前正在创建一个基于的图表我遇到的问题是颜色。它使用d3.scaleQuantize（），这显然是用颜色的数量来划分域，然后为每个部分分配一种颜色。换句话说，每种颜色都有相同的范围在下面的例子中，1和2之间的任何东西都是蓝色的，3和4是黑色的，5和6是红色的，7和8是黄色的，9和10是绿色的 var color = d3.scaleQuantize() .domain([1,10]) .range(["Blue", "Black", "Red", "Yellow", "

我不熟悉d3图表

我们目前正在创建一个基于的图表

我遇到的问题是颜色。它使用

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>


var url_string=window.location.href；
var url=新的url（url\u字符串）；
var Cell=url.searchParams.get（“Cell”）；
可变宽度=960，
高度=136，
细胞大小=17；
var color=d3.scaleQuantize（）
.domain（[0,10]）
.范围（[“蓝色”、“黑色”、“红色”、“黄色”、“绿色”）；
var dateFormat=d3.timeFormat（“%Y-%m-%d”）；
var svg=d3.选择（“主体”）
.selectAll（“svg”）
.数据（d3.范围（2017年、2018年））
.enter（）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“平移”（+（（宽度-单元大小*53）/2）+）、“+（高度-单元大小*7-1）+”）；
var rect=svg.append（“g”）
.attr（“填充”、“无”）
.attr（“笔划”，“#ccc”）
.selectAll（“rect”）
.数据（功能（d）{
返回d3.timeDays（新日期（d，0，1），新日期（d+1，0，1））；
})
.enter（）.append（“rect”）
.attr（“宽度”，单元格大小）
.attr（“高度”，单元格大小）
.attr（“x”，函数（d）{
返回d3.timeWeek.count（d3.timeYear（d），d）*单元大小；
})
.attr（“y”，函数（d）{
返回d.getDay（）*cellSize；
})
.数据（日期格式）；
svg.append（“g”）
.attr（“填充”、“无”）
.attr（“笔划”，“千”）
.selectAll（“路径”）
.数据（功能（d）{
返回d3.时间月（新日期（d，0，1），新日期（d+1，0，1））；
})
.enter（）.append（“路径”）
.attr（“d”，路径月）；
变量url=”http://Server/Service1.svc/GetData/“+细胞；
json（url、函数（错误、数据）{
//正在填充数据，因为我没有该文件
var nest=d3.nest（）
.键（功能（d）{
返回d.datekey；
})
.地图（数据）；
矩形过滤器（函数（d）{
在嵌套中返回（“$”+d）；
})
.attr（“填充”，函数（d）{
返回颜色（嵌套[（“$”+d）][0]。销售）；
})
});
功能路径月（t0）{
变量t1=新日期（t0.getFullYear（），t0.getMonth（）+1,0），
d0=t0.getDay（），
w0=d3.时间周计数（d3.时间年（t0），t0），
d1=t1.getDay（），
w1=d3.时间周数（d3.时间年（t1），t1）；
返回“M”+（w0+1）*cellSize+”，“+d0*cellSize”+
“H”+w0*单元尺寸+V”+7*单元尺寸+
“H”+w1*单元尺寸+“V”+（d1+1）*单元尺寸+
“H”+（w1+1）*单元尺寸+“V”+0+
“H”+（w0+1）*单元大小+“Z”；
}

供参考：

<!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"; 
  } 
}

函数标度（x）{
开关（真）{
案例x尽管这个问题已经有了公认的答案，我还是为未来的读者写这篇文章
根据OP描述的行为（“我需要根据范围设置颜色，1和3之间的任何颜色都是蓝色，4和6之间的任何颜色都是黑色，超过6的任何颜色都是红色”），这里正确的刻度是阈值刻度
根据报告：
阈值尺度类似于量化尺度，只是它们允许您将域的任意子集映射到范围内的离散值。输入域仍然是连续的，并根据一组阈值划分为多个切片（重点）
下面是一个基本演示：

var color=d3.scaleThreshold（）
.域（[4,6]）
.范围（[“蓝色”、“黑色”、“红色”）；
log（“1的颜色为：“+颜色（1））
log（“2的颜色为：“+颜色（2））
log（“3的颜色是：“+颜色（3））
日志（“4的颜色为：“+颜色（4））
日志（“5的颜色为：“+颜色（5））
日志（“6的颜色为：”+颜色（6））
log（“200的颜色是：“+color（200））
如果您的要求如此简单简洁，为什么不编写自己的缩放函数呢？基本上它只接受一个值并返回一种颜色。我对d3图表不熟悉，我的javascript非常有限。我甚至不知道从哪里开始编写缩放函数。函数缩放（x）{switch（true）{case XT这可能不适用于创建图例，但它将适用于通常的标记生成。我希望将您的代码与示例的其余部分一起作为参考。可以这样做吗？我的问题中包含了实际的代码。