D3 散点图很热以正确管理域和范围？

Question

我正在构建散点图 https://codepen.io/DeanWinchester88/pen/QWgGMja

我无法使 Y 轴显示格式为 xx : xx< 但我不明白为什么 X 轴显示这样的年份。请帮忙

https://codepen.io/freeCodeCamp/pen/bgpXyK - 应该是这样的

const xScale = d3.scaleLinear()
                      .domain([ d3.min(years), d3.max(years)  ])
                      .range([paddings.paddingLeft,w - paddings.paddingRight]);
      const xAxis = d3.axisBottom(xScale);
      svg.append("g")
                     .attr("transform", "translate(0," + (h - paddings.paddingLeft) + ")")
                      .attr("id","x-axis")
                      .call(xAxis);

Answer 1

为此，您需要使用 tickformat 函数
像这样：var xAxis = d3.axisBottom(xScale).tickFormat(d3.format('d'));

此处它位于您给定的代码段中：

      const xScale = d3.scaleLinear()
                      .domain([ d3.min(years), d3.max(years)  ])
                      .range([paddings.paddingLeft,w - paddings.paddingRight]);
var xAxis = d3.axisBottom(xScale).tickFormat(d3.format('d'));
      svg.append("g")
                     .attr("transform", "translate(0," + (h - paddings.paddingLeft) + ")")
                      .attr("id","x-axis")
                      .call(xAxis);

这应该可以解决 X 轴上未按预期显示年份的问题。

这里是 link，其中包含有关报价格式的更多信息：https://github.com/d3/d3-axis

D3 散点图很热以正确管理域和范围？

D3 scatterplot hot to manage domain and range properly?

scatter-plot

d3.js