javascript - 反转 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;
}