如何在 D3.js 中使用 scaleOrdinal 绘制一条线？

Question

我正在尝试使用 d3.js 版本 7 在 y 轴上绘制一些数字，这些数字对应于 x 轴上的字符串。我不确定要使用什么 x 比例尺。我正在尝试 scaleOrdinal 但情节不正确。我希望字符串在 x 轴上均匀分布，两端有一点填充。

const data = [{str: 'a',   num: 1}, {str: 'b', num: 3}, {str: 'c', num: 2}, {str: 'd', num: 0}];

const svg = d3.select("body").append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const xScale = d3.scaleOrdinal()
   .domain(d3.extent(data, function (d) {
      return d.str;
   }))
   .range([0, width]);

var yScale = d3.scaleLinear()
   .domain([0, 5])
   .range([height, 0]);

svg.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(xScale))
   .style('color', '#80ffffff')
   .style('font-size', 20)
   .selectAll("text")
   .style("text-anchor", "end")
   .attr("dx", "-.8em")
   .attr("dy", ".15em");

svg.append("g")
   .call(d3.axisLeft(yScale))
   .style('color', '#80ffffff');

const valueline = d3.line()
   .x(function (d) {
      return xScale(d.str);
   })
   .y(function (d) {
      return yScale(d.num);
   });

svg.append("path")
   .data([data])
   .attr("class", "line")
   .attr("d", valueline)
   .style("fill", "none")
   .style("stroke", '#ff0000ff')
   .style("stroke-width", 1);

Answer 1

序数尺度在这里不是正确的，主要是因为序数尺度需要具有离散（即定性，分类）域和范围。

你要的是point scale。另外，请注意 d3.extent 只有 returns 2 个值（在您的情况下 "a" 和 "d"），所以您想要的是常规 Array.prototype.map .也就是说，您的比例是：

const xScale = d3.scalePoint()
    .domain(data.map(function (d) {
        return d.str;
    }))
    .range([0, width])
    .padding(yourPaddingHere)

如何在 D3.js 中使用 scaleOrdinal 绘制一条线？

How do you plot a line using scaleOrdinal in D3.js?

javascript

d3.js