D3 Y 轴似乎颠倒了

我正在尝试根据 CSV 文件中的一些数据生成图表。

My code:

    <script>
        var svg = d3.select("body").append("svg")
            .attr("width", 1000)
            .attr("height", 1000);
        function render(data){
            var circles = svg.selectAll("circle").data(data);

            circles.enter().append("circle")
                .attr("r", 1);
            circles
                .attr("cx", function (d){return d[' Monthly Term']})
                .attr("cy", function (d){ return d[' Principal Balance']/1000});

            circles.exit().remove();
        }
        d3.csv("{% static "data/Total.csv" %}" , type, function(myArray){
            render(myArray);
            myArray.forEach(function(d){
                console.log(d[' Principal Payment'] + ", " + d[' Interest Payment'] + ", " +  d[' Principal Balance'] + ", " +d[' Monthly Term']);

            });
        });

        function type(d){
            d.value = +d.value;
            return d;
        }

    </script>

Everything "works" but the Y-axis seems reversed.

不确定你们是否可以看到检查窗口，但 Y 值应该随着 x 值的增加而减少。

有任何想法吗？

在控制台输出中，Y 值随着 X 值的增加而减少。在 SVG 中，0,0 位置位于左上角。因此，Y 值越低，越接近屏幕顶部。尝试反转 Y 值：

.attr("cy", function (d){ return height - d[' Principal Balance']/1000});