如何在d3中悬停时增加饼段的大小 [英] How to increase size of pie segment on hover in d3

问题描述

我使用d3创建了饼图。
如何在悬停时增加饼段的大小？
正如你所看到的，绿色部分是如此之小，所以我想改变它的大小，如红色部分。我该怎么做？

我的代码：

  var w = 400; 
 var h = 400; 
 var r = h / 2; 
 var color = d3.scale.category20c（）; 
 
 var data = [{label：A类，价值：20}，
 {label：B类，价值：50}， 
 {label：C类，价值：30}，
 {label：A类，价值：20}，
 {label ：B类，价值：50}，
 {label：C类，价值：30}，
 {label：A类，价值 ：20}，
 {label：B类，价值：50}，
 {label：C类，价值：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;}）; 
 
 //声明一个弧生成器函数
 var arc = d3.svg.arc（）。outerRadius（r）; 
 var arcOver = d3.svg.arc（）
 .outerRadius（r + 9）; 
 
 //选择路径，使用弧形生成器绘制
 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，函数（d）{
 //记录弧生成器的结果以显示它有多酷:) 
 console.log（arc（d））; 
返回arc（d）; 
}）
 .on（mouseenter，函数（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小提琴中有例子：

I created pie chart using d3. How to increase size of pie segment on hover? As you can see, green segment is so small so I want to change it size like red segment. How can I do this?

My code:

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

There is example in js fiddle : jsfiddle Thanks.

解决方案

I just found solution for my problem.

I changed startAngle and endAngle in 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);
    })

Working example: jsfiddle

这篇关于如何在d3中悬停时增加饼段的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！