Как увеличить размер сегмента пирога при наведении курсора в d3

Я создал круговую диаграмму, используя d3. Как увеличить размер сегмента пирога на зависании? Как видите, зеленый сегмент настолько мал, что я хочу изменить его размер, как красный сегмент. Как я могу это сделать?Как увеличить размер сегмента пирога при наведении курсора в d3

Мой код:

var w = 400; 
var h = 400; 
var r = h/2; 
var color = d3.scale.category20c(); 

var data = [{"label":"Category A", "value":20}, 
        {"label":"Category B", "value":50}, 
        {"label":"Category C", "value":30}, 
      {"label":"Category A", "value":20}, 
        {"label":"Category B", "value":50}, 
        {"label":"Category C", "value":30}, 
      {"label":"Category A", "value":20}, 
        {"label":"Category B", "value":50}, 
        {"label":"Category C", "value":5}]; 


var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")"); 
var pie = d3.layout.pie().value(function(d){return d.value;}); 

// declare an arc generator function 
var arc = d3.svg.arc().outerRadius(r); 
var arcOver = d3.svg.arc() 
     .outerRadius(r + 9); 

// select paths, use arc generator to draw 
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice"); 
arcs.append("svg:path") 
    .attr("fill", function(d, i){ 
     return color(i); 
    }) 
    .attr("d", function (d) { 
     // log the result of the arc generator to show how cool it is :) 
     console.log(arc(d)); 
     return arc(d); 
    }) 
    .on("mouseenter", function(d) { 
      d3.select(this) 
       .attr("stroke","white") 
       .transition() 
       .duration(1000) 
       .attr("d", arcOver)    
       .attr("stroke-width",6); 
     }) 
     .on("mouseleave", function(d) { 
      d3.select(this).transition()    
       .attr("d", arc) 
       .attr("stroke","none"); 
     });;

Существует пример Js скрипкой: jsfiddle Спасибо. pie chart

источник

2015-06-13 Valentin Blokhin

Я просто нашел решение моей проблемы.

Я изменил startAngle и endAngle в d3:

.on("mouseenter", function(d) { 

     var endAngle = d.endAngle + 0.2; 
     var startAngle = d.startAngle - 0.2; 

       var arcOver = d3.svg.arc() 
    .outerRadius(r + 9).endAngle(endAngle).startAngle(startAngle); 

     d3.select(this) 
      .attr("stroke","white") 
      .transition() 
      .duration(1000) 
      .attr("d", arcOver)    
      .attr("stroke-width",6); 
    })

Рабочий пример: jsfiddle

источник

2015-06-17 15:06:24

Теперь это правильный код. Попробуйте it..ok

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Dsnap - Charts</title> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 

 
    </div> 
 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 
    <script> 
 
    var canvas = d3.select('#wrapper') 
 
     .append('svg') 
 
     .attr({ 
 
     'width': 650, 
 
     'height': 500 
 
     }); 
 

 
    var data = [{ 
 
     "label": "one", 
 
     "value": 40 
 
    }, { 
 
     "label": "two", 
 
     "value": 30 
 
    }, { 
 
     "label": "three", 
 
     "value": 30 
 
    }]; 
 

 
    var colors = ['red', 'blue']; 
 

 
    var colorscale = d3.scale.linear().domain([0, data.length]).range(colors); 
 

 
    var arc = d3.svg.arc() 
 
     .innerRadius(0) 
 
     .outerRadius(100); 
 

 
    var arcOver = d3.svg.arc() 
 
     .innerRadius(0) 
 
     .outerRadius(150 + 10); 
 

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

 

 
    var renderarcs = canvas.append('g') 
 
     .attr('transform', 'translate(440,200)') 
 
     .selectAll('.arc') 
 
     .data(pie(data)) 
 
     .enter() 
 
     .append('g') 
 
     .attr('class', "arc"); 
 

 
    renderarcs.append('path') 
 
     .attr('d', arc) 
 
     .attr('fill', function(d, i) { 
 
     return colorscale(i); 
 
     }) 
 
     .on("mouseover", function(d) { 
 
     d3.select(this).transition() 
 
      .duration(1000) 
 
      .attr("d", arcOver); 
 
     }) 
 
     .on("mouseout", function(d) { 
 
     d3.select(this).transition() 
 
      .duration(1000) 
 
      .attr("d", arc); 
 
     }); 
 

 
    renderarcs.append('text') 
 
     .attr('transform', function(d) { 
 
     var c = arc.centroid(d); 
 
     console.log(c); 
 
     return "translate(" + c[0] + "," + c[1] + ")"; 
 
     }) 
 
     .text(function(d) { 
 
     return d.value + "%"; 
 
     }); 
 
    </script> 
 
</body> 
 

 
</html>

источник

2015-06-13 08:47:25

Спасибо за ответ. Вы меняете данные по клику, но мне не нужно его изменять. Я хочу увеличить сегмент без данных изменения. –

ОК .. мне это изменить, а затем я пошлю его снова нормально. –

Было бы здорово, если бы вы могли объяснить выше «это правильный код» - что вы изменили и почему? Как код реализует эту функцию? –

Как увеличить размер сегмента пирога при наведении курсора в d3

ответ

Смежные вопросы