D3 SVG с конечной высотой и шириной

1

Я хочу создать рабочее пространство, в котором нужно использовать 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. Является ли это возможным?

Теги:
d3.js
svg

1 ответ

1
Лучший ответ

Нет, у 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.

Поделиться
  • 0
    Это то, что мне было нужно. В настоящее время я использую D3 v3. Есть ли возможность достичь этого с помощью функциональных возможностей jquery вместо замены D3 v3 на v4? - @ccprog
  • 0
    Это не будет иметь никаких преимуществ. jQuery не поддерживает свойства SVG, как d3. Ядром того, что вам нужно будет написать, являются слушатели событий, ограничивающие значения преобразования, и это, в любом случае, чисто математическая и JS-задача.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню