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

Question

I am a beginner in D3.js . I need to draw a graph with axis as per below image.Any working fiddle will help me a lot.

I have checked the below fiddle but not sure how to tweak it as per my requirement.

Answer 1

You can create the scale (which is completely independent from the axis) and use its parameters to create the svg elements for your axis; in your case the horizontal line and a circle + text as ticks. Specifically, you could use the scale range() to get the horizontal line length; and the scale ticks(n) functions to get n evenly spaced points in the domain of the scale. By passing these points to the scale you get the x coordinate to use for your ticks.

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; });

Here is a minimal working JSFiddle: http://jsfiddle.net/LeartS/yGesr/