Javascript D3js如何在甜甜圈图的正中间画一个圆

我想用d3.js创建一个甜甜圈图表，我想在它的正中间放一个导航按钮，也许当点击时会将整个图表缩小为一个较小的版本（可能会展开）。但这并不是我的问题有多复杂，但如果你能找到一个可能正是我想要的例子，那就更好了

现在的问题是定位一个

圆圈

，我不知道是否有更好的替代方案，但这就是它的运行方式

var height=800,
    width=800;

var data = [10,50,80];

var color = d3.scale.ordinal()
    .range(["red", "blue", "yellow"]);

// the graph
var radius=300;

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

var group = canvas.append("g")
    .attr("transform", "translate(300,300)");

var arc = d3.svg.arc()
    .innerRadius(100)
    .outerRadius(radius);
var pie = d3.layout.pie()
    .value(function(d){
       return d;
    });

var arcs = group.selectAll(".arc")
    .data(pie(data))
    .enter()
    .append("g")
    .attr("class", "arc");

arcs.append("path")
    .attr("d", arc)
    .attr("fill", function(d){
       return color(d.data);
    });

canvas.append("g")
      .attr("class", "collapse")
      .append("circle")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 100);

我只是做了一个肮脏的循环附加，因为我不想继续下去，如果有更好的方法，这就是为什么我问。如何将其放在中心位置，如果您很慷慨，如何在其上添加事件，可能使用

on

，然后将其缩小到大约

100px

，并使其成为按钮本身，因此当再次切换时，它会折叠

编辑 我想我有点要求太多了，那么：

---

在不硬编码的情况下将按钮居中

300px

？在您看来，svg圆圈可以作为按钮使用吗？

您似乎在问5个不同的问题，D3网站上的许多教程和示例中至少有一个介绍了所有这些问题。至于你的代码，在我看来还行，除了圆心在300300。是的，当我输入问题时，我非常兴奋，我会编辑它，感谢您指出为什么您首先要使用svg来制作圆形按钮？回答您的问题：您已经对group元素的300px翻译进行了硬编码，因此您还必须为圆形对其进行硬编码：），我不认为有理由不将其用作按钮。我想这毕竟是我的错误要求。