Question

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

现在的问题就是定位circle，我不知道是否有更好的选择，但这就是它的方式。

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圈可以做得很好吗？

D3js你如何在圆环图的中间画一个圆圈

修改

0 个答案: