Я действительно борется с инвертированием оси y. Я знаю, что могу просто вычесть высоту моего svgContainer в конце для точного считывания, но мне действительно нужно фактически перевернуть оси svg, чтобы сохранить атрибуты координат (x и y) в теге «rect».Инвертирование оси Y в D3
Я думал, что перевод и масштаб будут работать, но это ничего не меняет.
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()
Я думаю, что я имел дело с тем, что вы имеете дело с. Попробуйте окружить ось с помощью оберточного div, который имеет пустое пространство: no-wrap. Проводка моего css для повернутой оси в ответе. На самом деле это не ответ. – user3735633