Как настроить HTML-код Zoomable Circle Pack, чтобы он был адаптивным? - PullRequest
Новая
       16

Как настроить HTML-код Zoomable Circle Pack, чтобы он был адаптивным?

0 голосов
/ 04 января 2019

Мне удалось успешно выполнить следующий код https://bl.ocks.org/fdlk/076469462d00ba39960f854df9acda56. Теперь я пытаюсь найти способ автоматического масштабирования графика d3, когда я переключаю экраны (ноутбук на монитор большего размера) или окно браузера (полное или маленькое).

Может кто-нибудь подсказать мне, где применить твик, чтобы сделать упомянутый код отзывчивым? (Предполагается, что оригинальный код не отвечает)

Я уже безуспешно пробовал несколько вещей, таких как использование viewBox, событий Windows и т. Д. (См. ОПЦИИ ниже). Поскольку я новичок, я уверен, что чего-то маленького не хватает.

ВАРИАНТ 1:

Часть Оригинальный код :

Part-A 

<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

Part-B 

var svg = d3.select("svg"),
margin = 20,
diameter = +svg.attr("width"),
g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

Изменено Часть-А исходного кода: 

<svg id="chart" width="960" height="500"
viewBox="0 0 960 500"
preserveAspectRatio="xMidYMid meet">
</svg>

Ничего не добавлено в стиле (CSS).

ВАРИАНТ 2:

Часть Оригинальный код : 

var svg = d3.select("svg"),
margin = 20,
diameter = +svg.attr("width"),
g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

Изменено Оригинальный код: 

d3.select("div#chartId")
.append("div")
.classed("svg-container", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 600 400")
//class to make it responsive
.classed("svg-content-responsive", true);

Проблема в том, где определяется "div # chartId" в исходном коде? Это просто d3.select ("svg"). Кроме того, код ниже d3.select ожидает параметры поля и диаметра.

Также добавлено следующее в стиле (CSS) 

.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}

ВАРИАНТ 3:

Часть Оригинальный код : 

<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>  
var svg = d3.select("svg"),
margin = 20,
diameter = +svg.attr("width"),
g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

var color = d3.scaleLinear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);

Изменено Оригинальный код: 

<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart"></div>
<script>

var chartDiv = document.getElementById("chart");
var svg = d3.select(chartDiv).append("svg");

function redraw(){

// Extract the width and height that was computed by CSS.
    var width = chartDiv.clientWidth;
    var height = chartDiv.clientHeight;

    // Use the extracted size to set the size of an SVG element.
    svg
      .attr("width", width)
      .attr("height", height);

    // Draw an X to show that the size is correct.
    var lines = svg.selectAll("line").data([
      {x1: 0, y1: 0, x2: width, y2: height},
      {x1: 0, y1: height, x2: width, y2: 0}
    ]);
    lines
      .enter().append("line")
        .style("stroke-width", 50)
        .style("stroke-opacity", 0.4)
        .style("stroke", "black")
      .merge(lines)
        .attr("x1", function (d) { return d.x1; })
        .attr("y1", function (d) { return d.y1; })
        .attr("x2", function (d) { return d.x2; })
        .attr("y2", function (d) { return d.y2; })
     ;
  }

  // Draw for the first time to initialize.
  redraw();

  // Redraw based on the new size whenever the browser window is resized.
  window.addEventListener("resize", redraw);

var color = d3.scaleLinear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
...