带有 D3 的直方图，条形图不适合 svg 的高度

Question

我正在根据数据（动态变化）绘制直方图，但某些条形的高度不适合 svg 区域（超出 svg 区域） 这是我怀疑的一段代码：

private drawBars(data: any[]): void {
    let f = Math.min.apply(Math, this.fixedData.map(function (o) {
        return o.xAxis;
    }));
    /** Create the X-axis band scale */
    const x = d3.scaleBand()
        .range([f, 240])
        .domain(data.map(d => d.xAxis))
        .padding(0);

    /** Create the Y-axis band scale */
    const y = d3.scaleLinear()
        .domain([0, this.axisMax])
        .range([this.height, 0])
        .nice();


    /** Create and fill the bars */
    this.svg.selectAll("*").remove()
    this.svg.selectAll("bars")
        .data(data, d => d)
        .enter()
        .append("rect")
        .attr("x", d => x(d.xAxis))
        .attr("y", d => y(d.yAxis))
        .attr("width", x.bandwidth())
        .attr("height", (d) => this.height - y(d.yAxis))
        .attr("fill", (d) => this.colorPicker(d))
}

这是这种奇怪行为的证明：

任何想法，我将不胜感激！

Answer 1

您的问题是由this.axisMax 设置得太低引起的，这里：

    const y = d3.scaleLinear()
        .domain([0, this.axisMax])
        .range([this.height, 0])
        .nice();

您需要根据可用数据重新计算。

规模的域包含它接受的可能值的范围，但至少对于scaleLinear、scaleTime 和其他一些人，超出该范围不会引发错误甚至返回NaN .对于这些类型的尺度，域用于识别输入值和输出像素之间的线性变换。

例如

假设您有一个域 [0, 10] 和范围 [0, 100] 的线性刻度。然后，x = 0 给出像素值0，x = 10 给出100。但是，x = 20 给出的像素值200 超过了给定的范围。