如何增加特定弧段的內半徑？

我有一個餅圖，我想增加用戶鼠標懸停的弧的內半徑。如何增加特定弧段的內半徑？

例如，如果我用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/

來源

2014-04-26 Instinct

的「弧」只能有一個半徑，請詳細說明您的題。 – Teemu

例如，如果我將鼠標懸停在161的圓弧上，我只希望該圓弧段的內半徑增加。 – Instinct

如果我理解正確的話，它看起來像你可以改變這一行：

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

我改成了這一點，它產生一個體面的結果：

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

（增加50使用戶可以鼠標懸停在更大的部分;減少我噸的相反效果）

來源

2014-04-26 22:57:31 SharkofMirkwood

我認爲他們希望將該細分受衆羣從圈子中心移出來，但翻身時我也不確定！ – happyjack

是的，正好是傑克。 – Instinct

好吧，我明白了！我再看一眼。 – SharkofMirkwood

我發現了一個似乎工作得很好的解決方案。

所有你需要做的是創造另一個弧（一個更大的）

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); 
    });

來源

2014-04-27 03:26:13 Instinct

如何增加特定弧段的內半徑？

回答

相關問題