D3 добавляет две карты пончиков друг на друга.

Question

Я ищу, чтобы как-то получить две карты пончиков поверх друг друга или по крайней мере просто дуги. Я хочу скрыть одну конкретную дугу и показать другую по щелчку, а затем снова вернуться к клику.

я понял, вы можете просто скрыть дугу на мыши, выбрав этот кусок, и делать d3.select("the arc").attr("visibility", "hidden");

Так что я хочу, чтобы скрыть один кусочек, и показать другим. Я хочу, чтобы дуги занимали одно и то же место, поэтому показано, что другое похоже только на изменение дуги.

Спасибо, Брайан

Answer 1

Насколько я понимаю вашу проблему, вы хотите, чтобы обновить определенную дугу на мыши. Итак, вместо создания двух пончиков, один поверх другого, просто создайте одну диаграмму пончика и обновите ее всякий раз, когда нажимается дуга.

$(document).ready(function() { 
 

 
    var width = 400, 
 
    height = 250, 
 
    radius = Math.min(width, height)/2; 
 

 
    var color = d3.scale.category20(); 
 

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

 
    var arc = d3.svg.arc() 
 
    .innerRadius(radius - 70) 
 
    .outerRadius(radius - 20); 
 

 
    var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .append("g") 
 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
    var data = [{ 
 
    "apples": 53245, 
 
    "oranges": 200 
 
    }, { 
 
    "apples": 28479, 
 
    "oranges": 200 
 
    }, { 
 
    "apples": 19697, 
 
    "oranges": 200 
 
    }, { 
 
    "apples": 24037, 
 
    "oranges": 200 
 
    }]; 
 

 
    var path = svg.datum(data).selectAll("path") 
 
    .data(pie) 
 
    .enter().append("path") 
 
    .attr("fill", function(d, i) { 
 
     return color(i); 
 
    }) 
 
    .attr("d", arc) 
 
    .each(function(d) { 
 
     this._current = d; 
 
    }) // store the initial angles 
 
    .on("click", function(d) { 
 
     var key = d.data.getKeyByValue(d.value); 
 
     var oppKey = (key === "apples") ? "oranges" : "apples"; 
 
     change(oppKey); 
 
    }); 
 

 
    function change(keyVal) { 
 
    var value = keyVal; 
 
    pie.value(function(d) { 
 
     return d[value]; 
 
    }); // change the value function 
 
    path = path.data(pie); // compute the new angles 
 
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs 
 
    } 
 

 
    function type(d) { 
 
    d.apples = +d.apples; 
 
    d.oranges = +d.oranges; 
 
    return d; 
 
    } 
 

 
    // Store the displayed angles in _current. 
 
    // Then, interpolate from _current to the new angles. 
 
    // During the transition, _current is updated in-place by d3.interpolate. 
 
    function arcTween(a) { 
 
    var i = d3.interpolate(this._current, a); 
 
    this._current = i(0); 
 
    return function(t) { 
 
     return arc(i(t)); 
 
    }; 
 
    } 
 

 
    Object.prototype.getKeyByValue = function(value) { 
 
    for (var prop in this) { 
 
     if (this.hasOwnProperty(prop)) { 
 
     if (this[prop] === value) 
 
      return prop; 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>