d3饼图重叠不重叠

Question

我刚刚在d3.js的帮助下创建了饼图并应用了一些转换，但问题是，

当您将鼠标悬停在任何圆弧上时，它与2边节点/弧线重叠不足。我希望它与2边节点/弧重叠。

请帮帮我。 我想要当你悬停时，文字字体大小会增加。

这是我的代码。

<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    var w = 400;
    var h = 400;
    var r = h/2;
    var color = d3.scale.category20c();

    var data = [{"label":"CATEGORY A"},
        {"label":"CATEGORY B"},
        {"label":"CATEGORY C"},
        {"label":"CATEGORY D"},
        {"label":"CATEGORY E"},
    ];

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

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

    // select paths, use arc generator to draw
    var arcsslice_quadrant = vis.selectAll("g.slice").data(pie_quadrant).enter().append("g").attr("class", "slice");
    arcsslice_quadrant.append("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 :)
        return arc_quadrant(d);
    })
    .on("mouseenter", function(d) {

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

    var arcOver_quadrant = d3.svg.arc()
    .outerRadius(r + 15).endAngle(endAngle).startAngle(startAngle);

    d3.select(this)
    .attr("stroke","white")
    .transition()
    .duration(1000)
    .attr("d", arcOver_quadrant)
    .attr("stroke-width", 3);
    })
    .on("mouseleave", function(d) {
        d3.select(this).transition()
        .attr("d", arc_quadrant)
        .attr("stroke","none");
    });

    arcsslice_quadrant.append("text")
    .attr("transform", function(d) {
        d.innerRadius = 0;
        d.outerRadius = r;
        return "translate(" + arc_quadrant.centroid(d) + ")rotate(" + angle(d) + ")";
    })
    .attr("class", "sliceText")
    .attr("x", 20) //Move the text from the start angle of the arc
    .attr("dy", 3) //Move the text from the start angle of the arc
    .attr("text-anchor", "middle")
    .attr("xlink:href", function(d, i) {
        return "#sliceArc_" + i;
    })
    .text(function(d, i) { 
        return data[i].label; 
    });

    // Computes the angle of an arc, converting from radians to degrees.
    function angle(d) {
      var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
      console.log(a);
      return a > 90 ? a - 180 : a;
    }
</script>

Answer 1

Pie Slice Overlapping：您必须重新排列路径的位置才能实现此行为。由于路径元素位于其组内，因此只需使用以下代码将g元素移动到其父元素的底部。

 this.parentNode.parentNode.appendChild(this.parentNode); 

文字转换：

d3.select(this.parentNode).select("text")
      .attr('font-size', '1em')
      .transition()
      .duration(1000)
      .attr('font-size', '1.2em');

工作代码段

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

var data = [{
  "label": "CATEGORY A"
}, {
  "label": "CATEGORY B"
}, {
  "label": "CATEGORY C"
}, {
  "label": "CATEGORY D"
}, {
  "label": "CATEGORY E"
}, ];

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

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

// select paths, use arc generator to draw
var arcsslice_quadrant = vis.selectAll("g.slice").data(pie_quadrant).enter().append("g").attr("class", "slice");
arcsslice_quadrant.append("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 :)
    return arc_quadrant(d);
  })
  .on("mouseover", function(d) {

    this.parentNode.parentNode.appendChild(this.parentNode);
  
    d3.select(this.parentNode).select("text")
      .attr('font-size', '1em')
      .transition()
      .duration(1000)
      .attr('font-size', '1.2em');

    var endAngle = d.endAngle + 0.2;

    var startAngle = d.startAngle - 0.2;

    var arcOver_quadrant = d3.svg.arc()
      .outerRadius(r + 15).endAngle(endAngle).startAngle(startAngle);


    d3.select(this)
      .attr("stroke", "white")
      .transition()
      .duration(1000)
      .attr("d", arcOver_quadrant)
      .attr("stroke-width", 3);
  })
  .on("mouseleave", function(d) {
    d3.select(this.parentNode).select("text")
      .attr('font-size', '1.2em')
      .transition()
      .duration(1000)
      .attr('font-size', '1em');
  
    d3.select(this).transition()
      .attr("d", arc_quadrant)
      .attr("stroke", "none");
  });

arcsslice_quadrant.append("text")
  .attr("transform", function(d) {
    d.innerRadius = 0;
    d.outerRadius = r;
    return "translate(" + arc_quadrant.centroid(d) + ")rotate(" + angle(d) + ")";
  })
  .attr("class", "sliceText")
  .attr("x", 20) //Move the text from the start angle of the arc
  .attr("dy", 3) //Move the text from the start angle of the arc
  .attr("text-anchor", "middle")
  .attr("xlink:href", function(d, i) {
    return "#sliceArc_" + i;
  })
  .text(function(d, i) {
    return data[i].label;
  });

// Computes the angle of an arc, converting from radians to degrees.
function angle(d) {
  var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;

  return a > 90 ? a - 180 : a;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>

修改

将鼠标侦听器绑定到组元素而不是路径元素将解决此问题。请注意，在元素选择的侦听器内也会进行一些代码更改。

更新了代码段

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

var data = [{
  "label": "CATEGORY A"
}, {
  "label": "CATEGORY B"
}, {
  "label": "CATEGORY C"
}, {
  "label": "CATEGORY D"
}, {
  "label": "CATEGORY E"
}, ];

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

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

// select paths, use arc generator to draw
var arcsslice_quadrant = vis.selectAll("g.slice").data(pie_quadrant).enter().append("g").attr("class", "slice");
arcsslice_quadrant.append("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 :)
    return arc_quadrant(d);
  });

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

    this.parentNode.appendChild(this);
  
    d3.select(this).select("text")
      .attr('font-size', '1em')
      .transition()
      .duration(1000)
      .attr('font-size', '1.2em');

    var endAngle = d.endAngle + 0.2;

    var startAngle = d.startAngle - 0.2;

 
    var arcOver_quadrant = d3.svg.arc()
      .outerRadius(r + 15).endAngle(endAngle).startAngle(startAngle);


    d3.select(this).select("path")
      .attr("stroke", "white")
      .transition()
      .duration(1000)
      .attr("d", arcOver_quadrant)
      .attr("stroke-width", 3);
  })
  .on("mouseleave", function(d) {
    d3.select(this).select("text")
      .attr('font-size', '1.2em')
      .transition()
      .duration(1000)
      .attr('font-size', '1em');
  
    d3.select(this).select("path").transition()
      .attr("d", arc_quadrant)
      .attr("stroke", "none");
  });

arcsslice_quadrant.append("text")
  .attr("transform", function(d) {
    d.innerRadius = 0;
    d.outerRadius = r;
    return "translate(" + arc_quadrant.centroid(d) + ")rotate(" + angle(d) + ")";
  })
  .attr("class", "sliceText")
  .attr("x", 20) //Move the text from the start angle of the arc
  .attr("dy", 3) //Move the text from the start angle of the arc
  .attr("text-anchor", "middle")
  .attr("xlink:href", function(d, i) {
    return "#sliceArc_" + i;
  })
  .text(function(d, i) {
    return data[i].label;
  });

// Computes the angle of an arc, converting from radians to degrees.
function angle(d) {
  var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;

  return a > 90 ? a - 180 : a;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>