Javascript D3：Y轴上的多个值

我需要绘制一张图表，但很难找出最佳方法。本质上，我需要的是y轴上两个不同的数据集，它们是独立的值，但仍然相关。在y轴上为零时，数据集将更改为以正增量递增的不同值

---

创建这个的最佳方式是什么？虽然我当然可以找到多个y轴图的例子，但它们似乎并不能解释这个用例

您确实可以创建两个不同的刻度，这可能是标准溶液，或者。。。您只能创建一个比例！因此，出于好奇，以下是如何做到这一点：

创建一个从

-10

到

10

的刻度

var yScale = d3.scaleLinear()
    .domain([-10, 10])

。。。将轴中的负值更改为正值

var yAxis = d3.axisLeft(yScale)
    .tickFormat(d => d < 0 ? Math.abs(d) : d);

下面是一个使用随机数的演示：

var宽度=600，
高度=200，
填充=20；
svg=d3。选择（'body'）。追加（'svg'））
.attr（'width'，width）
.attr（'高度'），高度；
var dataExpiration=d3.range（10.map）（d=>({
x:d，
y:Math.random（）*10
}));
var dataInspiration=d3.range（10.map）（d=>({
x:d，
y:Math.random（）*10
}));
dataInspiration.forEach（d=>d.y=-d.y）
var xScale=d3.scalePoint（）
.域（d3.范围（10））
.范围（[填充，宽度-填充]）；
var yScale=d3.scaleLinear（）
.domain（[-10,10]）
.范围（[高度-填充，填充]）
var line=d3.line（）
.x（d=>xScale（d.x））
.y（d=>yScale（d.y））
.曲线（d3.curveMonotoneX）；
var lineExpiration=svg.append（“路径”）
.attr（“填充”、“无”）
.attr（“笔划”、“蓝色”）
.attr（“d”，行（数据过期））；
var lineInspiration=svg.append（“路径”）
.attr（“填充”、“无”）
.attr（“笔划”、“红色”）
.attr（“d”，第（d）行）；
var xAxis=d3.axisBottom（xScale）
.tickFormat（d=>d！=0？d:null）；
var yAxis=d3.axisLeft（yScale）
.tickFormat（d=>d<0？Math.abs（d）：d）；
var gX=svg.append（“g”）
.attr（“变换”、“平移（0）、+yScale（0）+”）
.呼叫（xAxis）；
var gY=svg.append（“g”）
.attr（“转换”、“转换”（+padding+”，0）”）
.呼叫（yAxis）
基本上在同一
g
元素中有两个单独的图表
dataInspiration.forEach(d => d.y = -d.y)