javascript - D3 Y 轴似乎倒转

Question

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

我的代码:

    <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>

一切都“有效”，但 Y 轴似乎颠倒了。

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

有什么想法吗？

Answer 1

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

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