Question

我制作了一个向下钻取的饼图，效果很好。你可以看到它here。

但是有一个问题：

1）单击一个节点，然后显示其子节点（级别1）或级别0节点。 2）将鼠标移动到另一个位置并移回到包含其原始位置的新节点，节点消失。

我认为此代码存在问题（gradientPie.js）

var paths = gPie.selectAll("path").data(pieChart(currData), function(d) {return d.data.cat;});
var texts = gPie.selectAll("text").data(pieChart(currData), function(d) {return d.data.cat;});
var lines = gPie.selectAll("line").data(pieChart(currData), function(d) {return d.data.cat;});

var arcs =  paths.enter().append("g").attr('class', 'slice');
arcs.append("path").attr("fill", function(d, i) { return "url(#gradient" + d.data.cat + ")"; })
    .transition().duration(1000).attrTween("d", tweenIn).each("end", function(){
      this._listenToEvents = true;
      gradPie.transitioning = false;
    })
    .attr("id", function(d, i){return 'p' + i;})
    .each(function(d) { this._current = d; });

arcs.append("text").attr("transform", function(d) {
    var c = d3.svg.arc().outerRadius(radius * 1.4).innerRadius(radius).centroid(d);
    return "translate(" + (0 + c[0]) + "," + (0 + c[1]) + ")";
    })
  .attr("dy", ".35em")
  .attr("class", "text-main")
  .style("text-anchor", "middle")
  .style("fill", "#3f5763")
  .style("font", "bold 14px Helvetica")
  .text(function(d) {
    $("#" + d.data.domID + " p").html(d.data.percent + "%");
    return d.data.percent + "%";
  });

arcs.append("line").attr("transform", function (d, i) {
    var rAngle = ((d.startAngle + d.endAngle) / 2 - (Math.PI / 2)) * 180 / Math.PI;
    return "rotate(" + rAngle + ")translate(" + radius * 1.1 + ")";
  })
  .attr("class", "line-ticks")
  .attr('stroke-width', '1')
  .attr("x2", -0.5 * radius)
  .style("stroke", "#3f5763")
  .style("fill", "none");


// Mouse interaction handling
paths.on("click", function(d, i){
    if(this.childNodes[0]._listenToEvents && !gradPie.transitioning){
      // Reset inmediatelly
      d3.select(this).attr("transform", "translate(0,0)")
      // Change level on click if no transition has started
      paths.each(function(){
         this.childNodes[0]._listenToEvents = false;
      });
      updateGraph(d.data.subfractions? d.data.cat : undefined);
    }
  })
.on("mouseover", function(d, i){

    // Mouseover effect if no transition has started
    if(this.childNodes[0]._listenToEvents && !gradPie.transitioning) {

      // Calculate angle bisector
      var ang = (d.endAngle + d.startAngle)/2;
      // Transformate to SVG space
      ang = (ang - (Math.PI / 2) ) * -1;

      // Calculate a 10% radius displacement
      var x = Math.cos(ang) * radius * 0.1;
      var y = Math.sin(ang) * radius * -0.1;

      d3.select(this).transition()
        .duration(250).attr("transform", function() {
            return "translate(" + x + ", " + y + ")";
        })
    }
  })
.on("mouseout", function(d){

  // Mouseout effect if no transition has started
  if(this.childNodes[0]._listenToEvents && !gradPie.transitioning){
    d3.select(this).transition()
      .duration(150).attr("transform", function() {
        return "translate(0,0)";
      });
  }
});



// Collapse sectors for the exit selection
  paths.exit().transition()
    .duration(1000)
    .attrTween("d", tweenOut).remove();

  texts.exit().transition()
    .duration(100).remove();

  lines.exit().transition()
    .duration(100).remove();

任何帮助？

向下钻取饼图消失

0 个答案: