Question

我有一个类似的数组：

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

我想添加一个轴，我每年都有一个刻度值（我可以用tickValues和tickFormat做）但是刻度标签不仅是年份而且有自定义格式，因此结果可能类似于＆＃34; 1999：5＆＃34;对于第一个数组元素。

改写它：

我现在在哪里

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

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

这可以用d3吗？

Answer 1

你可以尝试这样

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

Answer 2

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

一个简单的解决方案是使用tick的索引来获取其他属性，只要您显示所有标记（以及您使用的是序数标度）：

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

<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 3

我现在能够做到的事情：

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

相当难看，但它的确有效。如果我得到更好的解决方案，我会接受另一个解决方案。

d3.js，我如何创建一个带有自定义标签和海关标记的轴？

3 个答案: