d3 js блестящее интерактивное изменение размера - PullRequest
Новая
       11

d3 js блестящее интерактивное изменение размера

0 голосов
/ 16 июня 2020

Сейчас я пытаюсь реализовать следующую схему аккордов в моем приложении R Shiny, используя визуализацию d3 js (r2d3): http://bl.ocks.org/NPashaP/ba4c802d5ef68f70c019a9706f77ebf1

Однако размер svg кажется исправленным и не меняет размер в соответствии с размером окна браузера. Это исходный код: 

var ch = viz.ch().data(data)
      .padding(.01)
      .sort(sort)
      .innerRadius(430)
      .outerRadius(450)
      .duration(1000)
      .chordOpacity(0.3)
      .labelPadding(.03)
      .fill(function(d){ return colors[d];});

var width=1200, height=1100;

var svg = d3.select("body").append("svg").attr("height",height).attr("width",width);
svg.append("g").attr("transform", "translate(600,550)").call(ch);

Я попытался использовать ширину и высоту, которые уже предоставлены r2d3 svg, и использовать эти данные для расчета внутреннего / внешнего радиуса диаграммы: 

var width = width,
height = height,
outerRadius = Math.min(width, height) / 2 - 10,
innerRadius = outerRadius - 24;

var ch = viz.ch().data(data)
      .padding(.01)
      .sort(sort)
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .duration(1000)
      .chordOpacity(0.3)
      .labelPadding(.03)
      .fill(function(d){ return colors[d];});

var svg = div.append("svg").attr("height",height).attr("width",width);

svg.append("g").attr("transform", "translate(250,250)").call(ch);

Однако, похоже, это не работает. Диаграмма либо не полностью видна (часть диаграммы вынесена за пределы экрана), либо не находится в центре экрана. Что мне здесь не хватает?

...