Сделайте графики D3 отзывчивыми - PullRequest
Новая
       21

Сделайте графики D3 отзывчивыми

0 голосов
/ 13 ноября 2018

У меня есть пара графиков, созданных с помощью D3, но у меня возникают проблемы, когда я хочу отобразить их на небольших устройствах. Они обрезаны с левой и правой стороны, и я не вижу их должным образом.

Я понятия не имею, как это исправить, я пытался изменить размеры холста через CSS, когда размер экрана маленький, но я не смог. Я надеюсь, что вы можете мне помочь. Я предполагаю, что я должен внести некоторые изменения в CSS и в часть кода, где я устанавливаю размер графика. 

var margin = {top: 100, right: 111, bottom: 50, left: 120},
    width = 960 - margin.left - margin.right,
    height = 560 - margin.top - margin.bottom;


var svgbar = d3.select("#barforest").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

Спасибо

1 Ответ

0 голосов
/ 13 ноября 2018

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

...