Question

我有一个饼图，我想增加用户鼠标悬停的弧的内半径。

例如，如果我用161鼠标悬停在弧上，我只希望该弧段的内半径增加。

我该怎么做？

// arc radius
var radius = 200;
var p = Math.PI *2; //full circle

var data = [11,12,51,21,31,58,41,13,14,31,71,31,51,71,16,41,31,161];
var data1 = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18];

var width = 1000;
var height = 1000;



//========== color scale ==========//
var colorScale = d3.scale.ordinal()
                   .range(['#FFEBEB', '#FFC2C2', '#FFADAD', '#FF9999', '#FF7070', '#FF5C5C', '#FF4747', 
                    '#FF1F1F', '#FF0A0A', '#F50000', '#CC0000', '#A30000', '#8F0000', '#660000', '#520000', '#3D0000', '#290000', '#140000']);

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

var group = canvas.append("g")
                  .attr("transform", "translate(" + width/2 + ",500)");



var arc = d3.svg.arc()
            .innerRadius(radius-50)
            .outerRadius(radius);

var pie = d3.layout.pie()
            .value(function (d){return d;});

var sorted = data.sort(function(a,b){return a-b});

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


arcs.append("path")
    .attr("d", arc)
    .style('stroke', 'white')
    .style('stroke-width', 2)
    .attr("fill", function(d, i){return colorScale(d.data);}); 

arcs.append("text")
    .attr("transform", function(d){
        return "translate(" + arc.centroid(d) +")";
    })
    .attr("text-anchor", "middle")
    .text(function(d){return d.data});




//======== mouse over/out =========//
var prevColor;
arcs.on("mouseover", function(d){
    prevColor = d3.select(this).select("path").attr("fill");
    d3.select(this).select("path")
      .attr("fill", "black");
    })
    .on("mouseout", function(d){
        d3.select(this).select("path")
          .attr("fill", prevColor);
    });

http://jsfiddle.net/64vFq/

Answer 1

如果我理解正确，看起来你可以改变这一行：

var arc = d3.svg.arc()
        .innerRadius(radius-50)
        .outerRadius(radius);

我把它改成了它，它产生了一个不错的结果：

var arc = d3.svg.arc()
        .innerRadius(radius-150)
        .outerRadius(radius);

（增加50以使用户可以将鼠标移动到更大的部分;减少它以产生相反的效果）

Answer 2

我找到了一个似乎运作良好的解决方案。

您需要做的就是创建另一个弧（更大的弧）

var biggerArc = d3.svg.arc().outerRadius(radius+10).innerRadius(radius - 40);

然后将其添加到鼠标悬停

arcs.on("mouseover", function (d) {
        prevColor = d3.select(this).select("path").attr("fill");
        d3.select(this).select("path").attr("fill", "black");

        d3.select(this).select("path").transition()
               .duration(100)
               .attr("d", biggerArc);
    }).on("mouseout", function (d) {
        d3.select(this).select("path").attr("fill", prevColor);

        d3.select(this).select("path").transition()
               .duration(100)
               .attr("d", arc);
    });

如何增加特定弧段的内半径？

2 个答案: