Question

我正在尝试在d3 v5中获取自定义x轴值，并且我在网上可以找到的大多数示例似乎都适用于以前的版本，而我现在对文档的了解不多...

我正在用这样的对象制作条形图...

const data = {
  one: Math.floor(Math.random() * 100),
  two: Math.floor(Math.random() * 100),
  three: Math.floor(Math.random() * 100),
  four: Math.floor(Math.random() * 100),
}

所以我希望条形图的x轴值为字符串one, two, ...

我的d3代码看起来像是比例尺和轴

const keys = Object.keys(data);

let dataMax: number = 0;
keys.forEach(k => {
  if (data[k] > dataMax) {
    dataMax = data[k];
  }
});

const xScale = scaleLinear() // set the x scale and fit to width
  .domain([0, keys.length])
  .range([0, width]);

const yScale = scaleLinear()
  .domain([dataMax || 0, 0])
  .range([0, height]);

const s = select(this.node).select('.innerG');

s.append('g')
  .attr('class', 'xAxis') // set the class for the x axis
  .attr('transform', `translate(0, ${height})`)
  .call(axisBottom(xScale)); // add the axis

s.append('g')
  .attr('class', 'yAxis') // set the class for the y axis
  .call(axisLeft(yScale)); // set the axis

并且由此，我的图表呈现出了很棒的效果，但是我得到了1, 2, ...的x轴而不是我的数据键（字符串）。我在网上找到的大多数示例都说使用tickFormat()或svg.axis()，但这似乎是D3的旧版本。如何使用当前的v5来做到这一点？

D3版本5自定义x轴值

0 个答案: