不使用d3.svg.axis（）方法的D3軸

Question

我是D3.js的初學者。 我需要根據下面的圖像繪制一個軸圖。任何工作的小提琴都會對我有很大幫助。

我已經檢查了以下小提琴，但不確定如何根據我的要求進行調整。

Answer 1

您可以創建刻度（與軸完全獨立），並使用其參數為軸創建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; });

這是最小的JSFiddle工作： http : //jsfiddle.net/LeartS/yGesr/