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; DR;下面的代码。

顾名思义，

d3.scaleBand将返回带中间的刻度。以下图像是从d3 docs中无耻复制的：

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

由于您已经具有某种时间信息，因此可以尝试使用Date.parse(d.month)进行解析，然后将这些信息传递给您以建立您的域。

我修改了您的代码段，使其可在预览中使用，并对代码进行了注释，以进行其他一些改进。

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>

我希望这会有所帮助。

将区域图上的刻度线与字符串X值对齐

1 个答案: