将面积图上的刻度线与字符串 X 值对齐

Question

我正在使用 D3 库构建面积图，并使用他们的 area chart 示例来帮助我构建它。但是，我没有沿 x 轴使用日期，而是使用字符串，因此我尝试使用他们的 bar chart 示例来帮助我处理 xAxis 及其值。

不过，由于这个原因，我的 x 轴刻度线在两个值点之间“居中”，而不是左对齐（见下图）。

当我尝试使用面积图示例构建 xAxis 时，我没有看到任何被填充的区域或沿 xAxis 的任何数据点。

如何移动刻度线以直接在数据点上对齐，而不是在两个不同的数据点之间居中？

这是我的代码在构建图表时的样子：

    sampleAreaData = [
        {"month": "Jun. 2018", "value": "2"},
        {"month": "Jul. 2018", "value": "12"},
        {"month": "Aug. 2018", "value": "33"},
        {"month": "Sept. 2018", "value": "100"},
        {"month": "Oct. 2018", "value": "150"},
        {"month": "Nov. 2018", "value": "368"},
        {"month": "Dec. 2018", "value": "404"},
        {"month": "Jan. 2019", "value": "482"},
        {"month": "Feb. 2019", "value": "559"},
    ]

    initializeSampleAreaGraph() {
        // Variables
        const svg = d3.select(this.template.querySelector('svg.sampleAreaGraph'));
        const width = this.svgSampleAreaWidth;
        const height = this.svgSampleAreaHeight;
        const margin = ({top: 20, right: 20, bottom: 30, left: 30});
        const x = d3.scaleBand()
            .domain(this.sampleAreaData.map(d => d.month))
            .range([margin.left, width - margin.right])
        const y = d3.scaleLinear()
            .domain([0, d3.max(this.sampleAreaData, d => d.value)]).nice()
            .range([height - margin.bottom, margin.top]);
        const xAxis = g => g
            .attr("transform", `translate(0,${height - margin.bottom})`)
            .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
        const yAxis = g => g
            .attr("transform", `translate(${margin.left},0)`)
            .call(d3.axisLeft(y))
            .call(g => g.select(".domain").remove())
            .call(g => g.select(".tick:last-of-type text").clone()
                .attr("x", 3)
                .attr("text-anchor", "start")
                .attr("font-weight", "bold")
                .text(this.sampleAreaData.month));
        const area = d3.area()
            .x(d => x(d.month))
            .y0(y(0))
            .y1(d => y(d.value));

        // SVG Construction
        svg.append("path")
            .attr("fill", "steelblue")
            .datum(this.sampleAreaData)
            .attr("d", area)
        svg.append("g")
            .call(xAxis);
        svg.append("g")
            .call(yAxis);
        return svg.node();
    }

Answer 1

嗯，有几件事你可以改进。 TL;博士;下面的代码。

d3.scaleBand 将返回带中间的刻度，正如其名称所述。 下图是从d3 docs无耻复制过来的：

如您所见，scaleBand 的目的是将轴分成偶数带。

由于您已经有了某种时间信息，您可以尝试使用Date.parse(d.month) 解析它并传递此信息来构建您的域。

我修改了您的 sn-p，使其可以在预览中使用，并评论了您的代码以进行其他一些改进。

var sampleAreaData = [
        {"month": "Jun. 2018", "value": "2"},
        {"month": "Jul. 2018", "value": "12"},
        {"month": "Aug. 2018", "value": "33"},
        {"month": "Sept. 2018", "value": "100"},
        {"month": "Oct. 2018", "value": "150"},
        {"month": "Nov. 2018", "value": "368"},
        {"month": "Dec. 2018", "value": "404"},
        {"month": "Jan. 2019", "value": "482"},
        {"month": "Feb. 2019", "value": "559"},
    ];

    function initializeSampleAreaGraph() {
        // Variables
        // const svg = d3.select(this.template.querySelector('svg.sampleAreaGraph')); // no need to select a selection. d3.select is the same as a querySelector.
        const svg = d3.select('svg.sampleAreaGraph');
        const width = 500;
        const height = 500;
        const margin = ({top: 20, right: 20, bottom: 30, left: 30});
        const xScale = d3.scaleTime() // changed this to scaleBand
            .domain(d3.extent(sampleAreaData, function(d) { return Date.parse(d.month) })) // d3.extent return an array with min and max values
            .range([margin.left, width - margin.right]);
        const yScale = d3.scaleLinear()
            .domain([0, d3.max(sampleAreaData, d => d.value)])
            .nice()
            .range([height - margin.bottom, margin.top]);
        const xAxis = g => g
            .attr("transform", `translate(0, ${height - margin.bottom})`)
            .call(d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0));
        const yAxis = g => g
            .attr("transform", `translate(${margin.left},0)`)
            .call(d3.axisLeft(yScale))
            .call(g => g.select(".domain").remove())
            .call(g => g.select(".tick:last-of-type text").clone()
                .attr("x", 3)
                .attr("text-anchor", "start")
                .attr("font-weight", "bold")
                .text(sampleAreaData.month));
        
      const area = d3.area(sampleAreaData)
            .x(d => xScale(Date.parse(d.month))) // pass a valid date number
            .y0(yScale(0))
            .y1(d => yScale(d.value));

        // SVG Construction
        svg.append("path")
            .attr("fill", "steelblue")
            .datum(this.sampleAreaData)
            .attr("d", area)
        svg.append("g")
            .call(xAxis);
        svg.append("g")
            .call(yAxis);
        return svg.node();
    }

initializeSampleAreaGraph();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="900" height="500" class="sampleAreaGraph"></svg>

我希望这会有所帮助。