Javascript D3.js-重新定位第页的圆环图

我正在使用马特·科尔（Matt Kohl）的动画甜甜圈图表在我的网站上的一个元素中使用，我重新设计了它的样式，但不知道如何将它重新定位到我想在页面上的任何位置。它固定在浏览器窗口的中间

与其将所有代码都放在这里，我将在他的教程中为您提供一个代码链接：

我尝试了HTML和CSS中的一切来操纵容器svg的大小和图表的位置，但都没有成功

---

这显然是JavaScript中需要更改的内容，但我不是专家，所以我想在这里询问一下

下面是要查看的相关代码。宽度和高度变量将控制svg大小，因为它们是通过

.attr（“宽度”，宽度）

和

.attr（“高度”，高度）

传入的。现在，为了更好地定位svg，我将给它一个类或id，如下所示。然后，您可以使用css定位将svg定位到您想要的位置

var duration = 1500,
transition = 200,
percent = 45,
width = window.innerWidth - 20,
height = window.innerHeight - 20;

var dataset = {
        lower: calcPercent(0),
        upper: calcPercent(percent)
    },
    radius = Math.min(width, height) / 3,
    pie = d3.layout.pie().sort(null),
    format = d3.format(".0%");

var arc = d3.svg.arc()
    .innerRadius(radius * .8)
    .outerRadius(radius);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("id", "yourid")
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

#您的ID{位置：绝对；顶部：50%；}

带百分比的动画甜甜圈
@导入url(https://fonts.googleapis.com/css?family=Open+Sans）；
身体{
宽度：100%；
身高：100%；
字体系列：Lora，“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：#fff；
背景色：#000；
}
path.0{
填充：#fff；
}
path.color1{
填充物：rgba（255255.3）；
}
正文{
字号：7em；
字体大小：400；
线高：16em；
填充：#fff；
}
var持续时间=1500，
过渡=200，
百分比=45，
宽度=300，
高度=300；
变量数据集={
下限：calcPercent（0），
上限：calcPercent（百分比）
},
半径=数学最小值（宽度、高度）/3，
pie=d3.layout.pie（）.sort（null），
格式=d3.格式（“.0%”）；
var arc=d3.svg.arc（）
.内半径（半径*.8）
.外层（半径）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“id”、“yourid”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var path=svg.selectAll（“路径”）
.数据（饼图（数据集下方））
.enter（）.append（“路径”）
.attr（“类”，函数（d，i）{
返回“颜色”+i
})
.attr（“d”，弧）
.每个功能（d）{
这是。_电流=d；
});
var text=svg.append（“文本”）
.attr（“文本锚定”、“中间”）
.attr（“dy”，“.3em”）；
var进程=0；
var timeout=setTimeout（函数（）{
clearTimeout（超时）；
path=path.data（pie（dataset.upper））；
path.transition（）.duration（duration）.attrTween（“d”，函数（a）{
var i=d3.内插（该电流为a）；
var i2=d3.插值（进度，百分比）
该电流=i（0）；
返回函数（t）{
文本（格式（i2（t）/100））；
返回弧（i（t））；
};
});
}, 200);
函数calcPercent（百分比）{
回报率(百分之百,百分之百);；
};

嗨，谢谢你的回答，我真的很感激。我已经设法将图表的笔划设置为正确的大小，因为它在iMac上的浏览器全宽上显示，但当我将浏览器的宽度向内拖动到较小的屏幕尺寸并刷新时，图表的半径会减小，因此会向内挤压百分比数。是否有任何方法可以锁定图表笔划的径向宽度，以便在所有视口大小中保持该宽度。我猜它在默认情况下是响应的，这就是为什么在较小的屏幕上宽度会发生变化？感谢Marc，如果您已将高度和宽度设置为px值而不是百分比，则不应更改大小。有两个宽度和高度参数：var duration=1500，transition=200，percent=80，width=window.innerWidth-20，height=window.innerHeight-20；和：var svg=d3.select（“body”）.append（“svg”）.attr（“width”，185）.attr（“height”，245）.append（“g”）.attr（“transform”，“translate”（+103+），“+100+”））；第一组与您的不同，因为它声明“window.innerWidth”和“window.innerHeight”。我假设两个代码块中的两个测量值都是以像素为单位的数字，而不是百分比？Window.innerWidth和height是您想要更改的。这些将返回以px为单位的当前窗口大小。这就是为什么图表圈变小了。将它们设置为一个像素值，比如1920宽乘以980，或者任何能很好地占据整个屏幕的值。