如何绘制svg坐标空间，其中x = 0和y = 0坐标位于左下角

Question

你基本上svg坐标空间从上到下增长。我应该改变为从底部到顶部如图坐标空间一样增长。下面的代码在左侧从上到下画出我需要如何改变到底部到顶部

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

//Create and append line
svg.append("line")
        .attr("x1", 100)
        .attr("x2", 500)
        .attr("y1", 50)
        .attr("y2", 250)
        .attr("stroke", "black")

Answer 1

您可以将简单变换应用于主SVG元素以翻转坐标：

var svg = d3.select("body")
            .append("svg")
              .attr("width", 500)
              .attr("height", 500)
              .attr( 'transform', 'scale( 1 -1 )' );

MDN @ scale()