Как сделать SVG отзывчивым в D3 с viewbox? - PullRequest
Новая
       25

Как сделать SVG отзывчивым в D3 с viewbox?

1 голос
/ 01 мая 2019

Я заметил, что в различных примерах SVG отзывчив (изменяет размер в ответ на изменения размера окна) и иногда не реагирует при использовании viewbox / preserveAspectRatio.Вот очень простой пример.Я использую viewbox и preseverAspectiRatio для элемента SVG, как и любой другой пример, но, тем не менее, он не отвечает, почему? 

<html>
<meta charset="utf-8">
<body>
<div id ="chart"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

<script>
var svgContainer = d3.select("#chart")
  .append("svg")
  .attr("width", 200)
  .attr("height", 200)
  .attr("viewBox", "0 0 100 100")
  .attr("preserveAspectRatio", "xMinYMin meet")

 //Draw the Circle
var circle = svgContainer.append("circle")
  .attr("cx", 50)
  .attr("cy", 50)
  .attr("r", 50);
</script>
</body>
</html>

1 Ответ

0 голосов
/ 01 мая 2019

В настоящее время ваш svg не изменяется, потому что вы указали фиксированное значение для контейнера svg 200x200. 

var svgContainer = d3.select("#chart")
  .append("svg")
  .attr("width", 200) // setting fixed width
  .attr("height", 200) // setting fixed width

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

var svgContainer = d3.select("#chart")
  .append("svg")
  .attr("width", '100%') // percent width
  .attr("height", 100%) // percent height

Другим возможным решением является использование события Window#resize и изменение размера svg в зависимости от изменений. 

window.addEventListener('resize', function () {
// select svg and resize accordingly
});

Я должен добавить, что в chrome вы можете использовать ResizeObserver , чтобы отслеживать изменения размера родителей svg и соответственно изменять размер svg. 

    const resizeOb = new ResizeObserver((entries: any[]) => {
      for (const entry of entries) {
        const cr = entry.contentRect;
        const width = cr.width; // parent width
        const height = cr.height; // parent height
        // resize svg
      }
    });
    this.resizeOb.observe(svgParentElement);
...