如何在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)

如果要调整图表大小，请首先将边距值更改为更小的值。 （这也是为什么你的图表偏离顶部和左边的原因......）