Javascript d3：根据另一个数据集为一条线上色

我想用数据集的值给矩形上色

下面是一个示例，我绘制了一个正弦波，并用y值（当y值从1变为-1时，从红色变为蓝色）为线条着色

我想要的是有一个由y值着色的条

这是一把小提琴：

（为我之前的帖子（小提琴不见了）道歉！）

---

我现在明白了。我会定义一个复杂的梯度，在x域中匹配y值：

var c = d3.scaleLinear()
  .domain([-1,1])
  .range(['blue', 'red'])

svg.append("linearGradient")
  .attr("id", "line-gradient2")
  .attr("gradientUnits", "userSpaceOnUse")
  .attr("x1", 10).attr("y1", 0)
  .attr("x2", 280).attr("y2", 0)
  .selectAll("stop")
  .data(data)
  .enter()
  .append('stop')
  .attr('stop-color', function(d){
    return c(d.y);
  })
  .attr('offset',function(d){
    return (d.x/xScale.domain()[1] * 100) + '%';
  });

以下是它正在发挥的作用：

var svg=d3.select（'body'）.append（'svg'））
svg.attr（'width'，300）.attr（'height'，300）
数据=d3.范围（0,2*Math.PI，0.1）
.map（函数（t）{
返回{
x:t，
y:数学，sin（t）
};
});
var xScale=d3.scaleLinear（）
.domain（[0,2*Math.PI]）
.范围（[10290]）
var yScale=d3.scaleLinear（）
.domain（[-1，1]）
.范围（[150,10]）
var line=d3.line（）
.x（功能（d，i）{
返回x刻度（d.x）；
})
.y（功能（d，i）{
返回y刻度（d.y）；
});
svg.append（“linearGradient”）
.attr（“id”，“线坡度”）
.attr（“gradientUnits”、“userSpaceOnUse”）
.attr（“x1”，0）.attr（“y1”，yScale（-1））
.attr（“x2”，0）.attr（“y2”，yScale（1））
.选择全部（“停止”）
.数据([{
“偏移量”：“0%”，
颜色：“蓝色”
}, {
“抵销”：“100%”，
颜色：“红色”
}])
.输入（）
.附加（“停止”）
.attr（“偏移量”，函数（d）{
返回d.offset；
})
.attr（“停止颜色”，功能（d）{
返回d.color；
})
var c=d3.scaleLinear（）
.domain（[-1,1]）
.range（['蓝色'，'红色']））
svg.append（“linearGradient”）
.attr（“id”，“线梯度2”）
.attr（“gradientUnits”、“userSpaceOnUse”）
.attr（“x1”，10）.attr（“y1”，0）
.attr（“x2”，280）.attr（“y2”，0）
.选择全部（“停止”）
.数据（数据）
.输入（）
.append（'stop'）
.attr（'stop-color'，函数（d）{
返回c（d.y）；
})
.attr（'offset'，函数（d）{
返回值（d.x/xScale.domain（）[1]*100）+'%'；
});
append（'g'）
.基准（数据）
.append（'路径'）
.attr（'d'，行）
.attr（'类'，'行'）
.attr（'stroke'，'url（#line gradient'））
append（'g'）
.基准（数据）
.append（'rect'）
.attr（'x'，10）
.attr（'y'，160）
.attr（'width'，280）
.attr（'height'，20）
.attr（'fill'，'url（#line-gradient2）'
var rWidth=280/（data.length-1）；
append（'g'）
.selectAll（'rect'）
.数据（数据）
.输入（）
.append（'rect'）
.attr（'x'，函数（d）{return xScale（d.x）；}）
.attr（'y'，200）
.attr（'width'，rWidth）
.attr（'height'，20）
.attr（'笔划'，'无'）
.attr（'fill'，函数（d）{返回c（d.y）；}）

.line{
填充：无；
笔画宽度：2；
}

---

我现在明白了。我会定义一个复杂的梯度，在x域中匹配y值：

var c = d3.scaleLinear()
  .domain([-1,1])
  .range(['blue', 'red'])

svg.append("linearGradient")
  .attr("id", "line-gradient2")
  .attr("gradientUnits", "userSpaceOnUse")
  .attr("x1", 10).attr("y1", 0)
  .attr("x2", 280).attr("y2", 0)
  .selectAll("stop")
  .data(data)
  .enter()
  .append('stop')
  .attr('stop-color', function(d){
    return c(d.y);
  })
  .attr('offset',function(d){
    return (d.x/xScale.domain()[1] * 100) + '%';
  });

以下是它正在发挥的作用：

var svg=d3.select（'body'）.append（'svg'））
svg.attr（'width'，300）.attr（'height'，300）
数据=d3.范围（0,2*Math.PI，0.1）
.map（函数（t）{
返回{
x:t，
y:数学，sin（t）
};
});
var xScale=d3.scaleLinear（）
.domain（[0,2*Math.PI]）
.范围（[10290]）
var yScale=d3.scaleLinear（）
.domain（[-1，1]）
.范围（[150,10]）
var line=d3.line（）
.x（功能（d，i）{
返回x刻度（d.x）；
})
.y（功能（d，i）{
返回y刻度（d.y）；
});
svg.append（“linearGradient”）
.attr（“id”，“线坡度”）
.attr（“gradientUnits”、“userSpaceOnUse”）
.attr（“x1”，0）.attr（“y1”，yScale（-1））
.attr（“x2”，0）.attr（“y2”，yScale（1））
.选择全部（“停止”）
.数据([{
“偏移量”：“0%”，
颜色：“蓝色”
}, {
“抵销”：“100%”，
颜色：“红色”
}])
.输入（）
.附加（“停止”）
.attr（“偏移量”，函数（d）{
返回d.offset；
})
.attr（“停止颜色”，功能（d）{
返回d.color；
})
var c=d3.scaleLinear（）
.domain（[-1,1]）
.range（['蓝色'，'红色']））
svg.append（“linearGradient”）
.attr（“id”，“线梯度2”）
.attr（“gradientUnits”、“userSpaceOnUse”）
.attr（“x1”，10）.attr（“y1”，0）
.attr（“x2”，280）.attr（“y2”，0）
.选择全部（“停止”）
.数据（数据）
.输入（）
.append（'stop'）
.attr（'stop-color'，函数（d）{
返回c（d.y）；
})
.attr（'offset'，函数（d）{
返回值（d.x/xScale.domain（）[1]*100）+'%'；
});
append（'g'）
.基准（数据）
.append（'路径'）
.attr（'d'，行）
.attr（'类'，'行'）
.attr（'stroke'，'url（#line gradient'））
append（'g'）
.基准（数据）
.append（'rect'）
.attr（'x'，10）
.attr（'y'，160）
.attr（'width'，280）
.attr（'height'，20）
.attr（'fill'，'url（#line-gradient2）'
var rWidth=280/（data.length-1）；
append（'g'）
.selectAll（'rect'）
.数据（数据）
.输入（）
.append（'rect'）
.attr（'x'，函数（d）{return xScale（d.x）；}）
.attr（'y'，200）
.attr（'width'，rWidth）
.attr（'height'，20）
.attr（'笔划'，'无'）
.attr（'fill'，函数（d）{返回c（d.y）；}）

.line{
填充：无；
笔画宽度：2；
}

---

我不确定你想要什么。渐变的范围为140像素。你的酒吧有20间。你看不到任何梯度在酒吧。我更新了小提琴，以显示我正在尝试做什么。我用了一系列的“rect”，每个颜色都不同。我认为应该有一个更简单的方法。。。？我不知道你想要什么。渐变的范围为140像素。你的酒吧有20间。你看不到任何梯度在酒吧。我更新了小提琴，以显示我正在尝试做什么。我用了一系列的“rect”，每个颜色都不同。我认为应该有一个更简单的方法。。。？