在D3中反轉Y軸

Question

我真的很想反轉我的y軸。 我知道我可以在末尾減去svgContainer的高度以獲得准確的讀數，但是我真的需要實際翻轉svg軸本身，以將'rect'標簽中的坐標（x和y）屬性保留下來。

我以為翻譯和縮放會起作用，但不會改變任何東西。

function dynamicRectangles(){   
    var svgContainer = d3.select(".wall")
                                .append("svg")
                                .attr("translate",(0,wall.wall_height))
                                .attr("scale",(1,-1))
                                .attr("width", wall.wall_width)
                                .attr("height", wall.wall_height)
                                .style("border", "1px dashed black")
                                ;

        var drag = d3.behavior.drag()
            .on("drag", dragMove)



        var rect = svgContainer.selectAll(".draggableRectangle").data(art).enter()
                .append('rect')
                .attr('class', 'draggableRectangle')
                .attr('name', function(d) { return d.art_name; })
                 .attr('x', function(d) { return d.leftCorner.X; })
                 .attr('y', function(d) {return d.leftCorner.Y; })
                 .attr('width', function(d) { return d.art_width; })
                 .attr('height', function(d) { return d.art_height; })
                 .style("fill", "red")
                 .call(drag);



        function dragMove(d) {
             d3.select(this)
                 .attr("x", function () {return d3.event.x})
                 .attr("y", function () {return d3.event.y});
             var X = document.getElementById("displayInfo");
                 X.innerHTML = d3.event.x;
             var Y = document.getElementById("displayInfoY");
                 Y.innerHTML = d3.event.y;
             var name = document.getElementById("name");
                 name.innerHTML = d.art_name;
            // console.log(name, d3.event.x, d3.event.y)

         }
     }

    dynamicRectangles()

Answer 1

.yAxisWrapper {
   float: left;
   white-space: nowrap;
}

.yAxisLabel {
   width: 20px;
   height: 20px;
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); 
   -o-transform: rotate(-90deg); 
   position: relative; 
   top: 100px;
}