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