0

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

现在的问题只是位置 a 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 圆圈可以作为一个按钮吗？

4

0 回答 0