d3.js，如何创建带有自定义标签和自定义刻度的轴？答案

【问题标题】：d3.js, how can i create an axis with custom labels and customs ticks?d3.js，如何创建带有自定义标签和自定义刻度的轴？
【发布时间】：2017-07-02 14:48:48
【问题描述】：

我有一个类似这样的数组：

[{year: 1999, val: 5}, {year: 2002, val: 8}]

并且我想添加一个轴，在该轴上我对每年的值都有一个刻度（我可以使用 tickValues 和 tickFormat 来做），但刻度标签不仅是年份，而且具有自定义格式，因此结果可以第一个数组元素类似于“1999: 5”。

换个说法：

我现在在哪里

const xAxis = d3.axisTop(xScale)
        .tickValues(data.map(d => d.year);

这不行，因为只有年份显示在刻度的标签上，我想使用自定义格式。

d3 可以做到这一点吗？

【问题讨论】：

标签： javascript d3.js data-visualization

【解决方案1】：

你可以这样试试

const xAxis = d3.axisTop(xScale)
        .tickValues(data)
        .tickFormat(d => (d.year +":"+ d.val));

【讨论】：

对不起，我写了一段错误的代码，我现在已经更正了。这个解决方案（就像我之前写的那样）不起作用，因为用于刻度的数组元素不是数值。

【解决方案2】：

由于您没有在问题中显示比例，我们不知道您拥有什么类型的比例以及域值是什么。但有一件事是肯定的：你不能将整个对象传递给它。因此，您的 tickFormat 无权访问每个对象中的某个属性。

一个简单的解决方案是使用刻度的索引来获取其他属性，前提是您显示所有刻度（并且您使用的是序数刻度）：

var axis = d3.axisBottom(scale)
  .tickFormat(function(d, i) {
    return d + ": " + data[i].val;
  });

这是一个演示：

var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 100);

var data = [{
  year: 1999,
  val: 5
}, {
  year: 2002,
  val: 8
}, {
  year: 2005,
  val: 1
}, {
  year: 2008,
  val: 4
}, {
  year: 2011,
  val: 9
}, {
  year: 2014,
  val: 2
}];

var scale = d3.scalePoint()
  .range([20, 480])
  .domain(data.map(function(d) {
    return d.year
  }));

var axis = d3.axisBottom(scale)
  .tickFormat(function(d, i) {
    return d + ": " + data[i].val;
  });

var gX = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis);

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

【讨论】：

谢谢，我们一起发布了相同的解决方案！这有点难看，但这是我能想到的最好的。
@heapOverflow 我们的解决方案不一样。您的解决方案将仅在刻度上显示 val 值，并且在您的问题中，您清楚地要求刻度中的 year 和 val 。既然你说它有效，我只能假设你的问题措辞不正确......既然如此，没有人可以帮助你，因为预期的结果不清楚。

【解决方案3】：

我现在能做的：

d3.axisTop(xScale)
        .tickValues(data.map(d => d.year))
        .tickFormat((d, i) => data[i].val);

相当丑陋，但它的工作原理。如果我得到更好的解决方案，我会接受不同的解决方案。

【讨论】：