Javascript 在D3 X轴图形上放置自定义标签

我正在用我的图表取得进展，它似乎大部分是有效的。但是，我很难将数据值放在x轴上。在这种情况下，应该有3个x轴标签（test1、test2、test3）

它似乎只是通过有多少个条目（0,1,2）来标记它，而不是使用名称。我试图改变的是：

var line = d3.line()
  .x(function(d, i) {
    return xScale(i);

对此（我必须承认这有点猜测）

不幸的是，这不起作用，我不确定我下一步可以尝试什么。这里是完整的代码，如果这有帮助的话

---

您的x数据使用了错误的刻度。您有离散数据，需要一个

运行代码：

//数据
变量数据集=[{
名称：“test1”，
y:0.1
},
{
名称：“test2”，
y:0.6
},
{
名称：“test3”，
y:0.9
}
];
//计算数据点的数量
var n=Object.keys（数据集）.length；
//查找Y轴数据点的最大值
var mymax=Math.max.apply（Math，dataset.map（函数（o））{
返回o.y；
}));
// 2. 使用保证金惯例惯例
var保证金={
前50名，
右:50,，
底数：50，
左：50
},
宽度=window.innerWidth-margin.left-margin.right；
高度=window.innerHeight-margin.top-margin.bottom；
// 5. X标度将使用我们数据的索引
var xScale=d3.scalePoint（）
.domain（dataset.map（d=>d.name））//输入
.范围（[0，宽度]；//输出
// 6. Y刻度将使用随机生成的数字
var yScale=d3.scaleLinear（）
.domain（[0，mymax]）//输入
.范围（[高度，0]）；//输出
// 7. d3线发生器
var line=d3.line（）
.x（功能（d，i）{
返回xScale（d.name）；
})//为线路生成器设置x值
.y（功能（d）{
返回y刻度（d.y）；
})//设置线生成器的y值
.curve（d3.curveMonotoneX）//对直线应用平滑
// 1. 将SVG添加到页面并使用#2
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
// 3. 调用组标记中的x轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（xScale））；//使用d3.axisBottom创建轴组件
// 4. 调用组标记中的y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.call（d3.axisLeft（yScale））；//使用d3.axisLeft创建轴组件
// 9. 追加路径、绑定数据并调用行生成器
追加（“路径”）
.datum（数据集）//10。将数据绑定到行
.attr（“类”、“行”）//为样式指定一个类
.attr（“d”，行）；//11调用线路生成器
// 12. 为每个数据点追加一个圆圈
svg.selectAll（“.dot”）
.数据（数据集）
.enter（）.append（“圆”）//使用enter（）.append（）方法
.attr（“class”，“dot”）//为样式指定一个类
.attr（“cx”，函数（d，i）{
返回xScale（d.name）
})
.attr（“cy”，函数（d）{
返回y刻度（d.y）
})
.attr（“r”，5）
.on（“鼠标悬停”，功能（a、b、c）{
控制台日志（a）
this.attr（'class'，'focus'）
})
.on（“mouseout”，function（）{}）
.on（“mousemove”，mousemove）；
var focus=svg.append（“g”）
.attr（“类”、“焦点”）
.样式（“显示”、“无”）；
焦点。附加（“圆”）
.attr（“r”，4.5）；
focus.append（“文本”）
.attr（“x”，9）
.attr（“dy”，“.35em”）；
svg.append（“rect”）
.attr（“类”、“覆盖”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.on（“鼠标悬停”，函数（）{
focus.style（“显示”，空）；
})
.on（“mouseout”，函数（）{
focus.style（“显示”、“无”）；
})
.on（“mousemove”，mousemove）；
函数mousemove（）{
var x0=x.invert（d3.mouse（this）[0]），
i=平分日期（数据，x0，1），
d0=数据[i-1]，
d1=数据[i]，
d=x0-d0.date>d1.date-x0？d1:d0；
attr（“transform”、“translate”（+x（d.date）+）、“+y（d.close）+”）；
聚焦。选择（“文本”）。文本（d）；
}

.line{
填充：无；
行程：#ffab00；
笔画宽度：3；
}
.覆盖{
填充：无；
指针事件：全部；
}
/*通过指定填充和笔划来设置点的样式*/
多特先生{
填充：#ffab00；
冲程：#fff；
}
.焦点圈{
填充：无；
笔画：钢蓝；
}

var line = d3.line()
  .x(function(d, i) {
    return xScale(i);

var line = d3.line()
  .x(function(d, i) {
    return xScale(d.name);

var xScale = d3.scalePoint()
  .domain(dataset.map(d => d.name)) // input is an array of names
  .range([0, width]); // output