Javascript 不使用D3.svg.axis（）方法的D3轴

我是D3.js的初学者。我需要画一个轴图，如下图所示。任何工作小提琴将帮助我很多

我已经检查了下面的小提琴，但不确定如何根据我的要求调整它。

您可以创建比例（完全独立于轴），并使用其参数为轴创建svg元素；在您的例子中，水平线和圆圈+文本作为记号。 具体来说，您可以使用scale

range（）

获取水平线长度；标尺

ticks（n）

的功能是在标尺范围内获得

n

等间距点。通过将这些点传递到刻度，可以获得用于刻度的x坐标

xScale = d3.scale.linear().domain([0.0, 1.0]).range([0, width]);
var axis = svg.append('g').attr('class', 'xaxis');

axis.append('line').attr({
    'x1': xScale.range()[0],
    'y1': height,
    'x2': xScale.range()[1],
    'y2': height
});

ticks = axis.selectAll('.ticks')
    .data(xScale.ticks(10))
    .enter()
    .append('g')
    .attr('class', 'tick');

ticks.append('circle')
    .attr({
        'cx': function(d) { return xScale(d); },
        'cy': height,
        'r': 5
    });

ticks.append('text')
    .attr({
        'x': function(d) { return xScale(d); },
        'y': height,
        'dy': 20 // Move the text a little under the line
    })
    .text(function(d) { return d; });

---

这里是一个最小的工作JSFIDLE:

您的帖子中没有图像或指向小提琴的链接。添加了image.plz帮助。您可以使用标尺的

ticks（number）

方法获取刻度位置，然后使用标尺本身定位并绘制圆圈和标签。如果您需要更具体的帮助，您需要发布您尝试过的代码，并解释为什么它不适合您。