javascript - 在 d3 版本 4 中创建带序号的散点图

Question

我正在尝试使用 d3 v4 创建散点图。我已经看过很多 v3 和 v4 的例子，但是没有太多解释如何在 v4 中创建具有序数比例的图形。我的代码如下:

const margin = { top: 100, right: 50, left: 50, bottom: 50};
const width = 1500 - margin.right - margin.left;
const height = 1250 - margin.top - margin.bottom;

d3.csv("http://localhost:9000/data.csv", (error, data) => {
    if (error) throw error;

    const x = (d) => d["Category"];

    const xScale = d3.scaleOrdinal()
                     .domain(data.map((d) => d["Category"]))
                     .range([0, width]);


    const xAxis = d3.axisBottom(xScale);

    const y = (d) => d["Score"];
    const yScale = d3.scaleLinear()
                     .range([height, 0]);
    yScale.domain([d3.min(data, y)-1, d3.max(data, y)+1]);

    const yAxis = d3.axisLeft(yScale);

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


    svg.append('g')
       .attr('class', 'x axis')
       .call(xAxis)
       .attr('transform', 'translate(0, 400)')
       .append('text')
       .attr('class', 'label')
       .attr('x', width)
       .attr('y', -6)
       .style('text-anchor', 'end')
       .text('Category');

    svg.append('g')
       .attr('class', 'y axis')
       .call(yAxis)
       .attr('class', 'label')
       .attr('transform', 'rotate(-90)')
       .attr('y', 6)
       .attr('dy', '.71rem')
       .text('Score');

    svg.selectAll('circle')
       .data(data)
       .enter()
       .append('circle')
       .attr('class', 'dot')
       .attr('cx', (d) => {
           console.log(x(d));
           return x(d);
       })
       .attr('cy', (d) => y(d))
       .attr('r', 5)
       .attr('fill', 'red');
});

CSS:

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

我的问题是什么都没有真正出现。对于我想在序数刻度上显示的每个 x 值，我都会收到此错误消息:

Error: <circle> attribute cx: Expected length, "B10".

y 轴根本不出现，x 轴出现时没有刻度和'Category' 文本。请帮忙!

Answer 1

不要在这里使用 scaleOrdinal，因为你有一个连续的范围。

改用scalePoint。根据 API:

Point scales are a variant of band scales with the bandwidth fixed to zero. Point scales are typically used for scatterplots with an ordinal or categorical dimension.

因此，它应该是:

const xScale = d3.scalePoint()
    .domain(data.map((d) => d["Category"]))
    .range([0, width]);

除此之外，您应该使用比例来设置cx 属性，而不是“x”常量:

.attr('cx', (d) => xScale(d.Category))