如何在D3中沿Xaxis设置自定义刻度？或者在条形图中命名条形图？

Question

我正在尝试创建一个条形图,其中包含D3中xAxis上每个条形的自定义值,并且我认为我会尝试使用tickValues.只是尝试一下,我给它一些虚拟数据,但它不能像这样工作:

  var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")

    .tickValues(['hi','b','c','d','e']);

这是xScale:

gon.votes.length是每个答案的总票数的数组,并且在功能上只返回特定调查问题将有多少条(这是一个调查应用程序fyi)

  var xScale = d3.scale.linear()
    .domain([0,gon.votes.length])
    .range([0,w]);

最后,当我打电话

function(d){ return d.title}

这将为每个条形图提取适当的标题.

此处还有渲染的xAxis的刻度线的html:NaN

有关如何将其放在xAxis上的任何提示？是否试图修改错误的方法？

Answer 1

啊,我看到你使用的是线性刻度.在这种情况下,您需要一个序数比例,因为域是一组离散值(标题列表).

工作示例:http: //tributary.io/inlet/5775047 轴部分的代码中有注释.

问题是范围数组需要具有与域数组中的标签一样多的值.否则它会回收.在你的情况下,第一个标签是0,然后是w,然后是0,然后是w,依此类推.