Я хочу создать рабочее пространство, в котором нужно использовать D3 SVG с фиксированной шириной и высотой. Обычно это svg бесконечно в обоих измерениях. В приведенном ниже примере элемент окружности перетаскивается в любую позицию (даже снаружи) в окне просмотра.
Ссылка на скрипку: https://jsfiddle.net/313vhqdx/
var container = d3.select("body")
.append("svg")
.attr("id", "svgcontainer")
.attr("width", 300)
.attr("height", 300)
.style("background-color", "blue")
.call(zoom)
.append("g");
Но в моем случае мне нужно установить фиксированную ширину и высоту для SVG. Является ли это возможным?
Нет, у SVG всегда есть концептуально бесконечные координаты. Но в d3 с версии 4 вы можете легко ограничить масштабирование/перетаскивание с помощью zoom.translateExtent
:
var zoom = d3.zoom()
.translateExtent([[-100, -100], [400, 400]])
.scaleExtent([0, 2])
.on("zoom", function () {
container.attr("transform", d3.event.transform);
});
Так как jsfiddle загружает только d3 версии 3, вот CodePen.