D3 Y轴似乎反转 [英] D3 Y-Axis Seems Inverted

问题描述

我正在尝试根据CSV文件中的某些数据生成图形.

I am trying to generate a graph based on some data from a CSV file.

我的代码:

    <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轴似乎相反.

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

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

Not sure if you guys can see the inspection window but the Y-value should be decreasing as x value increases.

有什么想法吗?

推荐答案

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

In your console output, the Y value is decreasing as X value increases. In an SVG, the 0,0 location is top left. So a lower Y value is closer to the top of the screen. Try inverting the Y value:

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

这篇关于D3 Y轴似乎反转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！