d3.js - d3 条形图刻度在 y 轴上反转，看起来不像经典问题，为什么它表现得很奇怪？

Question

在 d3（垂直条形图）中绘制直方图，除了 y 轴刻度反转外，效果很好。这是（几乎）有效的代码：

let maxFrequency = d3.max(histData, d=> d.length); 
let yScale = d3.scaleLinear()
    .range([0,config.height - config.margin.top - config.margin.bottom])
    .domain([0,maxFrequency]);  //<-- this is wrong, right? It should be [maxFrequency,0]

let xScale = d3.scaleBand()
    .range([0, (config.width - config.margin.left - config.margin.right)])
    .domain(histData.map(d => d.Name))
    .padding(0.2);
//Draw the histogram bars
let bars = config.svgContainer.selectAll("rect")
    .data(histData);
bars.enter()
    .append("rect")
    .attr("width", xScale.bandwidth())
    .attr("height", (d)=> yScale(d.length))
    .attr("x", (d) => xScale(d.Name) + config.margin.left)
    .attr("y", (d)=> config.height - config.margin.bottom - yScale(d.length))
    .attr("fill", "red");//"#2a5599");
let axisX = d3.axisBottom(xScale)
config.svgContainer.append("g")
    .style("transform", `translate(${config.margin.left}px,${config.height - 
config.margin.bottom}px)`)
    .call(axisX)
let axisY = d3.axisLeft(yScale)
config.svgContainer.append("g")
    .style('transform',`translate(${config.margin.left}px,${config.margin.top}px)`)
    .call(axisY);

此代码生成此图。

在此处输入图像描述

通常，您需要反转 y 轴的域属性的顺序。这是我使用“.domain([maxFrequency,0])”代码时的图表，没有其他更改。

在此处输入图像描述

您可以看到 y 轴现在是正确的，但条形图看起来很不稳定。仔细观察，您可以看到数据 (1,9,40,80) 仍在显示，但条形图现在反转了。现在，条形高度为 79 (80-1)、71 (80-9)、40 (80-40) 和 0 (80-80)。

我希望这是我没有看到的简单的东西。对于听起来像这样的事情，我找不到任何已发布的解决方案。

标签： d3.jsscaleaxis