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});

Answer 2

正如@genestd 在他的回答中所說，SVG y 坐標從頂部開始，向下移動的值增加。 通常，您應該使用 d3比例將用戶空間值映射到svg 坐標值。 查看經典條形圖示例，您會看到以下幾行：

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

在這里， x 比例從0 到寬度， y 從高度到 0 。 由於您所看到的東西，它們彼此相反，x 從左到右增加，而 y 從上到下增加。 這個.range調用正在映射 SVG 坐標。

稍后你會看到這一行：

y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

這部分現在已經映射了用戶空間坐標，說它們從 0 到我們數據的最大值。

然后，您可以在繪制點時將比例用作函數。

在您的代碼中，它可能如下所示：

var svg = d3.select("body").append("svg")
  .attr("width", 1000)
  .attr("height", 1000);

var x = d3.scaleLinear().range([0, 1000]),
    y = d3.scaleLinear().range([1000, 0]);

function render(data){

  x.domain([0, d3.max(data, function(d){
    return d[' Monthly Term'];
  });

   y.domain([0, d3.max(data, function(d){
    return d[' Principal Balance']/1000;
  });

  var circles = svg.selectAll("circle").data(data);

  circles.enter().append("circle")
    .attr("r", 1);

  circles
    .attr("cx", function (d){return x(d[' Monthly Term']); })
    .attr("cy", function (d){ return y(d[' Principal Balance']/1000); });

  ...