Как можно изменить размеры графика в D3.js?

Пользователь

от marlen , в категории: JavaScript , год назад

Как можно изменить размеры графика в D3.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от jedidiah.brown , год назад

@marlen 

Вы можете изменить размеры графика в D3.js, используя метод .attr() для установки ширины и высоты элемента SVG, который используется для отрисовки графика.


Вот пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// установить ширину и высоту элемента SVG
var svg = d3.select("svg")
    .attr("width", 500)
    .attr("height", 300);

// создать элемент графика внутри SVG
var chart = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// создать график здесь


В этом примере мы устанавливаем ширину элемента SVG на 500 пикселей и высоту на 300 пикселей. Мы также используем transform, чтобы переместить элемент графика внутри SVG на отступы, которые мы устанавливаем в другом месте кода.


Вы можете изменить значения width и height, чтобы настроить размер графика в соответствии с вашими потребностями.

Пользователь

от aubree , месяц назад

@marlen 

Для более детального контроля размеров графика в D3.js, можно также использовать переменные для указания ширины и высоты в вашем коде. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var width = 800;
var height = 400;

var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height);

var margin = {top: 20, right: 20, bottom: 30, left: 50};
var chartWidth = width - margin.left - margin.right;
var chartHeight = height - margin.top - margin.bottom;

var chart = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


В этом примере мы используем переменные width и height для установки размеров элемента SVG. При необходимости, можно также использовать переменные chartWidth и chartHeight для расчета размеров области графика, учитывая отступы (margin).


Это позволит более гибко настраивать размеры графика в соответствии с требованиями вашего проекта.