如何在 D3 中沿 X 轴设置自定义刻度？或命名条形图中的条形？答案

【问题标题】：How do I set custom ticks along the Xaxis in D3? or name the bars in a bar chart?如何在 D3 中沿 X 轴设置自定义刻度？或命名条形图中的条形？
【发布时间】：2013-06-09 23:12:37
【问题描述】：

我正在尝试为 D3 中沿 xAxis 的每个条形创建一个带有自定义值的条形图，并认为我会尝试使用 tickValues。只是为了尝试一下，我给了它一些虚拟数据，但它不是这样工作的：

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

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

这是 xScale：

gon.votes.length 是每个答案的总票数数组，功能上仅返回特定调查问题的条数（这是一个调查应用程序仅供参考）

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

最后，当我打电话时

function(d){ return d.title}

这将为每个栏提取适当的标题。

这里还有被渲染的 xAxis 刻度的 html：钠氮

关于如何将它放在 xAxis 上的任何提示？尝试修改刻度是错误的方法吗？

【问题讨论】：

“不起作用”？请注意，您不应同时使用ticks 和tickValues。
哎呀，对不起，我实际上是在玩 d3 提供的所有刻度函数，当我发布它时应该已经注释掉刻度
那么它在哪些方面不起作用呢？您收到错误消息吗？
没有错误信息，但是我为x轴添加了相关的HTML
您的xscale 是否支持这些特定的分类值？

标签： javascript d3.js bar-chart data-visualization

【解决方案1】：

啊，我看到您使用的是线性刻度。在这种情况下，您需要一个序数尺度，因为域是一组离散值（标题列表）。

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

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

要从数据数组中动态获取标题，您需要在数组上使用 map 方法。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

动态标题的工作示例： http://tributary.io/inlet/5775215

【讨论】：