D3.js 具有y轴数据的d3多线对齐

我已经创建了d3多折线图。我成功地生成了x轴和y轴以及线。但不幸的是，我在这一点上被卡住了，无法将路径线与Y轴对齐，即

ScaleBand（）

。我不知道该怎么做，这条指导线会很好。我已经在代码片段中附加了示例数据。提前谢谢

var dataDomains=['automated'，'manual']
风险值数据=[
{自动：1000，手动：3000}，
{自动：5000，手动：6000}，
{自动：10000，手动：9000}，
{自动：50000，手动：12000}，
{自动：100000，手动：15000}，
]
//设置图形的尺寸和边距
var margin={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=960-margin.left-margin.right，
高度=200-margin.top-margin.bottom；
//设定范围
var x=d3.scaleLinear（）.range（[0，width]）；
变量y=d3.scaleBand（）.range（[height，0]）；
//定义第一行
var valueline=d3.line（）
.x（函数（d）{返回x（d.automated）；}）
.y（函数（d）{返回y（'automated'）；}）；
//定义第二行
var valueline2=d3.line（）
.x（函数（d）{返回x（d.manual）；}）
.y（函数（d）{返回y（'manual'）；}）；
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3.选择（“cl AVM”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//缩放数据的范围
x、 域（[0，d3.max（数据，函数（d）{return Math.max（d.automated，d.manual）}）]）
y、 域（数据域）；
//添加valueline路径。
追加（“路径”）
.数据（[数据]）
.attr（“类”、“行”）
.attr（“d”，valueline）；
//添加valueline2路径。
追加（“路径”）
.数据（[数据]）
.attr（“类”、“行”）
.style（“笔划”、“红色”）
.attr（“d”，valueline2）；
//添加X轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加Y轴
svg.append（“g”）
.调用（d3.左（y））
.line{
填充：无；
笔画：钢蓝；
笔画宽度：2px；
}
您可以使用缩放点而不是缩放带，因为您的直线可以被视为y轴上的一个点

然后，您可以添加一些填充，使两点的值不是0和100（我选择了0.6，但您可以使用它，看看什么最适合您）

您可以在此处查看scalePoint的用法的更多详细信息：

希望有帮助！：）


var dataDomains=['automated'，'manual']
风险值数据=[
{自动：1000，手动：3000}，
{自动：5000，手动：6000}，
{自动：10000，手动：9000}，
{自动：50000，手动：12000}，
{自动：100000，手动：15000}，
]
//设置图形的尺寸和边距
var margin={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=960-margin.left-margin.right，
高度=200-margin.top-margin.bottom；
//设定范围
var x=d3.scaleLinear（）.range（[0，width]）；
var y=d3.scalePoint（）.范围（[height，0]）。填充（0.6）；//在这里修改
//定义第一行
var valueline=d3.line（）
.x（函数（d）{返回x（d.automated）；}）
.y（函数（d）{返回y（'automated'）；}）；
//定义第二行
var valueline2=d3.line（）
.x（函数（d）{返回x（d.manual）；}）
.y（函数（d）{返回y（'manual'）；}）；
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3.选择（“cl AVM”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//缩放数据的范围
x、 域（[0，d3.max（数据，函数（d）{return Math.max（d.automated，d.manual）}）]）
y、 域（数据域）；
//添加valueline路径。
追加（“路径”）
.数据（[数据]）
.attr（“类”、“行”）
.attr（“d”，valueline）；
//添加valueline2路径。
追加（“路径”）
.数据（[数据]）
.attr（“类”、“行”）
.style（“笔划”、“红色”）
.attr（“d”，valueline2）；
//添加X轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加Y轴
svg.append（“g”）
.调用（d3.左（y））
.line{
填充：无；
笔画：钢蓝；
笔画宽度：2px；
}

我这里还有一个用于scalePoint的交互式演示（）如果它可以帮助您可视化参数如何修改显示！非常感谢。是的，这有助于解决问题。但我也找到了另一种方法，即在
d3.Line（）.y（函数（d）{return yScale（'automated'）+margin.top；}）
Ah是的，这可能适用于margin.top的某些值，但请注意，根据图形或pa的高度，情况可能并不总是如此