第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

d3v4 餅圖 - 分段懸停 - 像切蛋糕一樣展開分段

d3v4 餅圖 - 分段懸停 - 像切蛋糕一樣展開分段

溫溫醬 2023-03-24 14:25:23
我正在調(diào)整這個(gè)餅圖代碼 - 并嘗試為該部分設(shè)置動(dòng)畫,使其在懸停時(shí)像一塊蛋糕一樣突出。不確定為什么鼠標(biāo)懸停/離開事件的范圍不起作用。我試過調(diào)整半徑,但好像沒有正確獲取弧形對(duì)象http://jsfiddle.net/xejmwnob/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 $this = '#chart';        d3.select($this)            .selectAll('svg')            .remove();                const width = 300,            height = 300,            radius = 120,            innerradius = 0;                var arc = d3            .arc()            .outerRadius(radius)            .innerRadius(innerradius);        data.forEach(function(d) {            d.total = +d.value;        });        var pie = d3            .pie()            .sort(null)            .value(function(d) {                return d.total;            });        var svg = d3            .select($this)            .append('svg')            .attr('width', width)            .attr('height', height)            .append('g')            .attr('class', 'piechart')            .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');        var segments = svg.append('g').attr('class', 'segments');        var slices = segments            .selectAll('.arc')            .data(pie(data))            .enter()            .append('g')            .attr('class', 'arc');
查看完整描述

2 回答

?
至尊寶的傳說(shuō)

TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超10個(gè)贊

如果我通過“拉出切片”正確理解你,那么你想要平移切片的位置,而不是改變它的形狀。


困難的部分是弄清楚將形狀轉(zhuǎn)換到哪里,以便切片沿著正確的角度從中心移動(dòng)。最簡(jiǎn)單的解決方案是使用centroid,切片的中點(diǎn),然后根據(jù)需要調(diào)整這些值:


slices.on('mouseover', function(d) {

  d3.select(this)

    .transition()

    .duration(1000)

    .attr('transform', 'translate(' + (arc.centroid(d)[0] / 2) + ',' + (arc.centroid(d)[1] / 2) + ')');

});


slices.on('mouseout', function() {

  d3.select(this)

    .transition()

    .duration(500)

    .attr('transform', 'translate(0, 0)');

});

在這里,我將質(zhì)心 x 和 y 值分成兩半,這樣切片就不會(huì)離開 SVG 區(qū)域。

演示

PS:var color = d3.scale.category20c();是 d3v3,在 d3v4 中做它會(huì)是:var color = d3.scaleOrdinal(d3.schemeCategory20);。您鏈接的小提琴正在使用兩者。


查看完整回答
反對(duì) 回復(fù) 2023-03-24
?
aluckdog

TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超7個(gè)贊

展開切片

鼠標(biāo)事件實(shí)際上是與元素slices綁定的。<g>然后d3.select(this)是 the<g>而不是 exactpath元素。可以看到hover 之后<g>會(huì)有d屬性,但是我們需要d改變path.


嘗試


slices.on('mouseover', function(d) {          

    let expandArc = d3.arc()

                .innerRadius(innerradius)

                .outerRadius(radius * 1.2);   


    d3.select(this)

        .select("path")

        .transition()

        .duration(1000)

        //.ease('bounce')

        .attr('d', expandArc);

});  

翻譯切片

找到路徑的質(zhì)心并在懸停時(shí)平移它


let offset = 4;// how much do you want to translate from the origin

slices.on('mouseover', function(d) {                            

    d3.select(this)

        .transition()

        .duration(1000)

        .attr('transform', 'translate(' + arc.centroid(d)[0] / offset + ',' + arc.centroid(d)[1] / offset + ')')


});                                                           


slices.on('mouseout', function() {                                     

    d3.select(this)

        .transition()

        .duration(1000)

        .attr('transform', 'translate(0,0)')                     

});   

更新演示


查看完整回答
反對(duì) 回復(fù) 2023-03-24
  • 2 回答
  • 0 關(guān)注
  • 149 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)