D3 轴不使用 d3.svg.axis() 方法答案

【问题标题】：D3 axis without using d3.svg.axis() methodD3 轴不使用 d3.svg.axis() 方法
【发布时间】：2014-02-16 13:42:07
【问题描述】：

我是 D3.js 的初学者。我需要根据下图绘制带有轴的图形。任何工作小提琴都会对我有很大帮助。

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

【问题讨论】：

您的帖子中没有图片或小提琴链接。
添加了 image.plz 帮助。
您可以使用刻度的ticks(number) 方法来获取刻度位置，然后使用刻度本身来定位它们并绘制圆圈和标签。如果您需要更具体的帮助，您需要发布您尝试过的代码并解释为什么它不适合您。

标签： javascript charts d3.js

【解决方案1】：

您可以创建比例尺（完全独立于轴）并使用其参数为您的轴创建 svg 元素；在您的情况下，水平线和圆圈+文本作为刻度。具体来说，您可以使用比例尺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/

【讨论】：