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.
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ę? –