Как изменить размер круга в d3.js

Question

В настоящее время я новичок в d3.js и создал небольшой сборник для сайта, который я часто посещаю, но, как видно here Круг слишком большой для экрана браузера, или, по крайней мере, для меня.

Мой текущий код HTML можно найти here

Answer 1

Ваши маржинальные значения являются довольно большими, и вы используете эти значения, чтобы задать радиус диаграммы, а также размер элемента SVG. Этот код устанавливает ваше значение радиуса 490 (что означает ваш диаметр 980):

var margin = {top: 500, right: 700, bottom: 500, left: 700}, 
    radius = Math.min(margin.top, margin.right, margin.bottom, margin.left) - 10; 

Этот код настройки вашего SVG ширину элемента до 1400 и высотой до 1000:

var svg = d3.select("body").append("svg") 
    .attr("width", margin.left + margin.right) 
    .attr("height", margin.top + margin.bottom) 

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