Jak zwiększyć rozmiar segmentu kołowego na zawisie w d3

Utworzono wykres kołowy przy użyciu d3. Jak zwiększyć rozmiar segmentu kołowego po najechaniu kursorem? Jak widać, zielony segment jest tak mały, że chcę go zmienić tak jak czerwony segment. Jak mogę to zrobić?Jak zwiększyć rozmiar segmentu kołowego na zawisie w d3

Mój kod:

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

Jest przykładem js skrzypce: jsfiddle Dzięki. pie chart

Źródło

2015-06-13 Valentin Blokhin

Właśnie znalazłem rozwiązania mojego problemu.

Zmieniłem startAngle i endAngle w 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); 
    })

przykład robocza: jsfiddle

Źródło

2015-06-17 15:06:24

Teraz jest to właściwy kod. Spróbuj 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>

Źródło

2015-06-13 08:47:25

Dzięki za odpowiedź. Zmieniasz dane po kliknięciu, ale nie trzeba ich zmieniać. Chcę zwiększyć segment bez danych zmian. –

ok .. wyślij mi go edytować, a następnie wyślę go ponownie ok. –

Byłoby wspaniale, gdybyś mógł wyjaśnić poza tym "to jest właściwy kod" - co zmieniłeś i dlaczego? W jaki sposób kod implementuje tę funkcję? –

Jak zwiększyć rozmiar segmentu kołowego na zawisie w d3

Odpowiedz

Powiązane problemy