D3.js 创建由多个域组成的比例

我如何定义一个D3量表，其中多个域构成一个范围

示例

在本例中，我有3个不同大小的域，我希望它们转换为相等范围的三分之一

我想做什么：

const yScale = linearScale()
  .domain([ [0, 10], [11, 50], [51, 500] ])
  .range([0, 100])

const yScale1 = linearScale().domain([0, 10]).range([0, 33]);
const yScale2 = linearScale().domain([11, 50]).range([34, 66]);
const yScale3 = linearScale().domain([51, 500]).range([67, 100]);

if (val > 51) { 
  return yScale3(val);
} else if (val > 11) { 
  return yScale2(val);
} else {
  return yScale1(val);
}

我目前正在做的事情：

const yScale = linearScale()
  .domain([ [0, 10], [11, 50], [51, 500] ])
  .range([0, 100])

const yScale1 = linearScale().domain([0, 10]).range([0, 33]);
const yScale2 = linearScale().domain([11, 50]).range([34, 66]);
const yScale3 = linearScale().domain([51, 500]).range([67, 100]);

if (val > 51) { 
  return yScale3(val);
} else if (val > 11) { 
  return yScale2(val);
} else {
  return yScale1(val);
}

---

D3线性比例允许您传递域和范围的多个值。正如报告中所述：

虽然连续比例通常在其域和范围中各有两个值，但指定两个以上的值会生成分段比例

在您的情况下，这些将是：

const scale = d3.scaleLinear()
    .domain([0,10,50,500])
    .range([0, 33.3, 66.6, 100]);

或者，使用D3 v5.8速记的单行程序：

const scale = d3.scaleLinear([0,10,50,500], [0, 33.3, 66.6, 100]);

让我们看看它的实际行动：

const svg=d3.选择（“svg”）；
常量比例=d3.scaleLinear（）
.domain（[0,10,50,500]）
.范围（[0,33.3,66.6100]）；
const circles=svg.selectAll（空）
.数据（d3.范围（0500,2））
.输入（）
.附加（“圆圈”）
.attr（“r”，2）
.attr（“cx”，“i=>5+i*2+1）
.attr（“cy”，d=>105-量表（d））
svg{
背景色：小麦；
}
圈{
填充：无；
笔画：灰色；
}