Масштабирование диаграммы D3 внутри SVG при сохранении полей такой же ширины? - PullRequest
Новая
       12

Масштабирование диаграммы D3 внутри SVG при сохранении полей такой же ширины?

1 голос
/ 14 января 2020

Работа над рендерингом диаграмм с использованием D3, который должен масштабироваться до разных разрешений.

Я бы хотел сохранить все, кроме самого пути диаграммы, в размере c, который включает в себя весь текст, толщину линий и поля.

Думаю, я понял, как справиться со всем, кроме полей, и не могу найти кого-то, у кого такая же проблема, так что, надеюсь, кто-то может помочь.

Я написал короткий тестовый скрипт, который, надеюсь, объясняет, как у меня есть мои поля и все остальное настроено. Красным цветом обозначены поля, а серым прямоугольником обозначен график. Добавлен текстовый элемент, показывающий, как я масштабирую тексты, толщину линии и т. Д. c.

. Чего я хочу добиться, так это того, чтобы поле имело ширину stati c при масштабировании окна. Если я масштабирую svg и увеличиваю его на 100px, я хочу, чтобы красный прямоугольник стал на 100px шире, в то время как красные поля остаются прежними.

Я думал об увеличении среднего прямоугольника, используя переменную масштаба, чтобы увеличить его «быстрее», но попытка использовать что-то вроде преобразования (масштабирование по прямоугольнику в функции resized () дало неожиданные результаты. 

var margin = {top: 100, right: 150, bottom: 100, left: 150}

var outerWidth  = 1600,
        outerHeight = 900;

var width  = outerWidth - margin.right - margin.left,
        height = outerHeight - margin.top - margin.bottom;


svg = d3.select(".plot-div").append("svg")
        .attr("class", "plot-svg")
    .style("background-color", "red")
        .attr("width", "100%")
    .attr("viewBox", "0 0 " + outerWidth + " " + outerHeight);


g = svg.append("g")
    .attr("class", "plot-space")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "grey");

text = d3.select(".plot-space").append("text")
    .text("Text with the background")
    .attr("y", 50)
    .attr("x", 50)
    .attr("font-size", 16)
    .attr("font-family", "monospace")
    .attr("fill", "white");

window.addEventListener("resize", resized);

function resized(){
    var current_width = svg.node().getBoundingClientRect().width;
    var scale = outerWidth / current_width;
  text.attr("transform", "scale(" + scale + " " + scale + ")");

}
resized();

jsfiddle, с которым вы можете поиграть. https://jsfiddle.net/2tuompye/4/

...