Подсказка d3 не может показать измененные данные - PullRequest
Новая
       25

Подсказка d3 не может показать измененные данные

0 голосов
/ 28 декабря 2018

Я рисую вафельную диаграмму d3 с помощью файла csv.

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

Я использовал.on (mouseover) и .on (mouseout) для отображения всплывающей подсказки всякий раз, когда пользователи наводят курсор на диаграмму.

После того, как читатели нажмут одну из кнопок и наведут курсор на диаграмму, подсказка должна показатьобновил данные, но этого не произошло.

Это кнопки на моей html-странице 

    <div class="uk-container uk-container-small uk-margin-top">
    <div class="uk-button-group" data-uk-button-radio>
        <button class="uk-button uk-active" id="latest">Latest</button>
        <button class="uk-button" id="oldest">Oldest</button>
    </div>

Вот несколько примеров моих данных 

    par_code,state,ge14_constituency,mp_name,may_2018_camp,may_2018_party,dec_2018_camp,dec_2018_party
P002,Perlis,Kangar,Noor Amin Ahmad,Harapan,PKR,Harapan,PKR
P004,Kedah,Langkawi,Mahathir Mohammad,Harapan,Bersatu,Harapan,Bersatu
P005,Kedah,Jerlun,Mukhriz Mahathir,Harapan,Bersatu,Harapan,Bersatu
P006,Kedah,Kubang Pasu,Amiruddin Hamzah,Harapan,Bersatu,Harapan,Bersatu
P008,Kedah,Pokok Sena,Mahfuz Omar,Harapan,Amanah,Harapan,Amanah
P009,Kedah,Alor Setar,Chan Ming Kai,Harapan,PKR,Harapan,PKR
P010,Kedah,Kuala Kedah,Azman Ismail,Harapan,PKR,Harapan,PKR
P014,Kedah,Merbok,Nor Azrina Surip,Harapan,PKR,Harapan,PKR
P015,Kedah,Sungai Petani,Johari Abdul,Harapan,PKR,Harapan,PKR
P017,Kedah,Padang Serai,Karupaiya Mutusami,Harapan,PKR,Harapan,PKR
P018,Kedah,Kulim-Bandar Baharu,Saifuddin Nasution Ismail,Harapan,PKR,Harapan,PKR
P027,Kelantan,Tanah Merah,Ikmal Hisham Abdul Aziz,BN,Umno,Independent,Independent
P030,Kelantan,Jeli,Mustapa Mohamed ,BN,Umno,Harapan,Bersatu
P038,Terengganu,Hulu Terengganu,Rosol Wahid,BN,Umno,Independent,Independent
P042,Pulau Pinang,Tasek Gelugor,Shabudin Yahaya,BN,Umno,Independent,Independent
P043,Pulau Pinang,Bagan,Lim Guan Eng ,Harapan,DAP,Harapan,DAP
P044,Pulau Pinang,Permatang Pauh,Nurul Izzah Anwar,Harapan,PKR,Harapan,PKR
P045,Pulau Pinang,Bukit Mertajam,Sim Chee Keong,Harapan,DAP,Harapan,DAP
P046,Pulau Pinang,Batu Kawan,Kasthuriraani Patto,Harapan,DAP,Harapan,DAP
P047,Pulau Pinang,Nibong Tebal,Mansor Othman,Harapan,PKR,Harapan,PKR
P048,Pulau Pinang,Bukit Bendera,Wong Hon Wai,Harapan,DAP,Harapan,DAP
P049,Pulau Pinang,Tanjong,Chow Kon Yeow,Harapan,DAP,Harapan,DAP
P050,Pulau Pinang,Jelutong,Sanisvara Nethaji Rayer Rajaji,Harapan,DAP,Harapan,DAP
P051,Pulau Pinang,Bukit Gelugor,Ramkarpal Singh Karpal Singh,Harapan,DAP,Harapan,DAP
P052,Pulau Pinang,Bayan Baru,Sim Tze Tzin,Harapan,PKR,Harapan,PKR
P053,Pulau Pinang,Balik Pulau,Muhammad Bakhtiar Wan Chik,Harapan,PKR,Harapan,PKR
P056,Perak,Larut,Hamzah Zainudin,BN,Umno,Independent,Independent
P057,Perak,Parit Buntar,Mujahid Yusof Rawa,Harapan,Amanah,Harapan,Amanah
P058,Perak,Bagan Serai,Noor Azmi Ghazali,BN,Umno,Harapan,Bersatu
P059,Perak,Bukit Gantang,Syed Abu Hussin Hafiz Syed Abu Fasal,BN,Umno,Independent,Independent
P060,Perak,Taiping,Teh Kok Lim,Harapan,DAP,Harapan,DAP
P062,Perak,Sungai Siput,Kesavan Subramaniam,Harapan,PKR,Harapan,PKR
P063,Perak,Tambun,Ahmad Faizal Azumu,Harapan,Bersatu,Harapan,Bersatu
P064,Perak,Ipoh Timor,Wong Kah Woh,Harapan,DAP,Harapan,DAP
P065,Perak,Ipoh Barat,M. Kulasekaran V. Murugeson,Harapan,DAP,Harapan,DAP
P066,Perak,Batu Gajah,Sivakumar Varatharajy Naidu,Harapan,DAP,Harapan,DAP
P068,Perak,Beruas,Ngeh Koo Ham,Harapan,DAP,Harapan,DAP
P070,Perak,Kampar,Su Keong Siong,Harapan,DAP,Harapan,DAP
P071,Perak,Gopeng,Lee Boon Chye,Harapan,PKR,Harapan,PKR
P074,Perak,Lumut,Mohd Hatta Md Ramli,Harapan,Amanah,Harapan,Amanah
P076,Perak,Teluk Intan,Nga Kor Ming,Harapan,DAP,Harapan,DAP
P077,Perak,Tanjong Malim,Chang Lih Kang,Harapan,PKR,Harapan,PKR
P080,Pahang,Raub,Tengku Zulpuri Shah Raja Puji,Harapan,DAP,Harapan,DAP
P082,Pahang,Indera Mahkota,Saifuddin Abdullah,Harapan,PKR,Harapan,PKR
P083,Pahang,Kuantan,Fuziah Salleh,Harapan,PKR,Harapan,PKR
P088,Pahang,Temerloh,Mohd Anuar Mohd Tahir,Harapan,Amanah,Harapan,Amanah
P089,Pahang,Bentong,Wong Tack,Harapan,DAP,Harapan,DAP
P092,Selangor,Sabak Bernam,Mohd Fasiah Mohd Fakeh,BN,Umno,Independent,Independent
P093,Selangor,Sungai Besar,Muslimin Yahaya,Harapan,PKR,Harapan,PKR
P094,Selangor,Hulu Selangor,Leow Hsiad Hui,Harapan,PKR,Harapan,PKR
P096,Selangor,Kuala Selangor,Dzulkefly Ahmad,Harapan,Amanah,Harapan,Amanah
P097,Selangor,Selayang,William Leong Jee Keen,Harapan,PKR,Harapan,PKR
P098,Selangor,Gombak,Mohamed Azmin Ali,Harapan,PKR,Harapan,PKR
P099,Selangor,Ampang,Zuraida Kamaruddin,Harapan,PKR,Harapan,PKR
P100,Selangor,Pandan,Wan Azizah Wan Ismail,Harapan,PKR,Harapan,PKR
P101,Selangor,Hulu Langat,Hasanuddin Mohd Yunus,Harapan,Amanah,Harapan,Amanah
P102,Selangor,Bangi,Ong Kian Ming,Harapan,DAP,Harapan,DAP
P103,Selangor,Puchong,Gobind Singh Deo,Harapan,DAP,Harapan,DAP
P104,Selangor,Subang,Wong Chen,Harapan,PKR,Harapan,PKR
P105,Selangor,Petaling Jaya ,Maria Chin Abdullah,Harapan,PKR,Harapan,PKR
P106,Selangor,Damansara,Tony Pua,Harapan,DAP,Harapan,DAP
P107,Selangor,Sungai Buloh,Sivarasa Rasiah,Harapan,PKR,Harapan,PKR
P108,Selangor,Shah Alam,Khalid Abd Samad,Harapan,Amanah,Harapan,Amanah
P109,Selangor,Kapar,Abdullah Sani Abdul Hamid,Harapan,PKR,Harapan,PKR
P110,Selangor,Klang,Charles Santiago,Harapan,DAP,Harapan,DAP
P111,Selangor,Kota Raja,Mohamad Sabu,Harapan,Amanah,Harapan,Amanah
P112,Selangor,Kuala Langat,Xavier Jayakumar Arulanandam,Harapan,PKR,Harapan,PKR
P113,Selangor,Sepang,Mohamed Hanipa Maidin,Harapan,Amanah,Harapan,Amanah
P114,W.P. Kuala Lumpur,Kepong,Lim Lip Eng,Harapan,DAP,Harapan,DAP
P115,W.P. Kuala Lumpur,Batu,Prabakaran Parameswaran,Independent,Independent,Harapan,PKR
P116,W.P. Kuala Lumpur,Wangsa Maju,Tan Yee Kew,Harapan,PKR,Harapan,PKR
P117,W.P. Kuala Lumpur,Segambut,Yeoh Tseow Suan,Harapan,DAP,Harapan,DAP
P118,W.P. Kuala Lumpur,Setiawangsa,Nik Nazmi Nik Ahmad,Harapan,PKR,Harapan,PKR
P119,W.P. Kuala Lumpur,Titiwangsa,Rina Mohd Harun,Harapan,Bersatu,Harapan,Bersatu
P120,W.P. Kuala Lumpur,Bukit Bintang,Fong Kui Lun,Harapan,DAP,Harapan,DAP
P121,W.P. Kuala Lumpur,Lembah Pantai,Ahmad Fahmi Mohamed Fadzil,Harapan,PKR,Harapan,PKR
P122,W.P. Kuala Lumpur,Seputeh,Teresa Kok Suh Sim,Harapan,DAP,Harapan,DAP
P123,W.P. Kuala Lumpur,Cheras,Tan Kok Wai,Harapan,DAP,Harapan,DAP
P124,W.P. Kuala Lumpur,Bandar Tun Razak,Kamarudin Jaafar,Harapan,PKR,Harapan,PKR
P128,Negeri Sembilan,Seremban,Loke Siew Fook,Harapan,DAP,Harapan,DAP
P129,Negeri Sembilan,Kuala Pilah,Eddin Syazlee Shith,Harapan,Bersatu,Harapan,Bersatu
P130,Negeri Sembilan,Rasah,Cha Kee Chin ,Harapan,DAP,Harapan,DAP
P132,Negeri Sembilan,Port Dickson,Danyal Balagopal Abdullah,Harapan,PKR,Harapan,PKR
P133,Negeri Sembilan,Tampin,Hasan Bahrom,Harapan,Amanah,Harapan,Amanah
P134,Melaka,Masjid Tanah,Mas Ermieyati Samsudin,BN,Umno,Harapan,Bersatu
P135,Melaka,Alor Gajah,Mohd Redzuan Md Yusof,Harapan,Bersatu,Harapan,Bersatu
P136,Melaka,Tangga Batu,Rusnah Aluai,Harapan,PKR,Harapan,PKR
P137,Melaka,Hang Tuah Jaya,Shamsul Iskandar Mohd Akin,Harapan,PKR,Harapan,PKR
P138,Melaka,Kota Melaka,Khoo Poay Tiong,Harapan,DAP,Harapan,DAP
P140,Johor,Segamat,Santhara Kumar Ramanaidu,Harapan,PKR,Harapan,PKR
P141,Johor,Sekijang,Natrah Ismail,Harapan,PKR,Harapan,PKR
P142,Johor,Labis,Pang Hok Liong,Harapan,DAP,Harapan,DAP
P143,Johor,Pagoh,Muhyiddin Md Yasin,Harapan,Bersatu,Harapan,Bersatu
P144,Johor,Ledang,Syed Ibrahim Syed Nor,Harapan,PKR,Harapan,PKR
P145,Johor,Bakri,Yeo Bee Yin ,Harapan,DAP,Harapan,DAP
P146,Johor,Muar,Syed Saddiq Syed Abdul Rahman,Harapan,Bersatu,Harapan,Bersatu
P149,Johor,Sri Gading,Sharuddin Md Salleh,Harapan,Bersatu,Harapan,Bersatu
P150,Johor,Batu Pahat,Mohd Rashid Hasnon,Harapan,PKR,Harapan,PKR
P151,Johor,Simpang Renggam,Mazlee Malik,Harapan,Bersatu,Harapan,Bersatu
P152,Johor,Kluang,Wong Shu Qi,Harapan,DAP,Harapan,DAP
P154,Johor,Mersing,Abd Latiff Ahmad,BN,Umno,Independent,Independent
P158,Johor,Tebrau,Choong Shiau Yoon,Harapan,PKR,Harapan,PKR
P159,Johor,Pasir Gudang,Hassan Abdul Karim,Harapan,PKR,Harapan,PKR
P160,Johor,Johor Bahru,Akmal Nasrullah Mohd Nasir,Harapan,PKR,Harapan,PKR
P161,Johor,Pulai,Salahuddin Ayub,Harapan,Amanah,Harapan,Amanah
P162,Johor,Iskandar Puteri,Lim Kit Siang,Harapan,DAP,Harapan,DAP
P163,Johor,Kulai,Teo Nie Ching,Harapan,DAP,Harapan,DAP
P165,Johor,Tanjung Piai,Md Farid Md Rafik,Harapan,Bersatu,Harapan,Bersatu
P167,Sabah,Kudat,Abdul Rahim Bakri,BN,Umno,Independent,Independent
P168,Sabah,Kota Marudu,Maximus Ongkili,BN,PBS,GBS,PBS
P172,Sabah,Kota Kinabalu,Chan Foong Hin,Harapan,DAP,Harapan,DAP
P173,Sabah,Putatan,Awang Husaini Sahari,Harapan,PKR,Harapan,PKR
P176,Sabah,Kimanis,Anifah Aman ,BN,Umno,Independent,Independent
P177,Sabah,Beaufort,Azizah Mohd Dun,BN,Umno,Independent,Independent
P179,Sabah,Ranau,Jonathan Yasin,Harapan,PKR,Harapan,PKR
P180,Sabah,Keningau,Jeffrey Kitingan,STAR,STAR,GBS,STAR
P181,Sabah,Tenom,Noorita Sual,Harapan,DAP,Harapan,DAP
P182,Sabah,Pensiangan,Arthur Joseph Kurup,BN,PBRS,GBS,PBRS
P183,Sabah,Beluran,Ronald Kiandee,BN,Umno,Independent,Independent
P184,Sabah,Libaran,Zakaria Mohd Edris,BN,Umno,Independent,Independent
P186,Sabah,Sandakan,Wong Tien Fatt,Harapan,DAP,Harapan,DAP
P190,Sabah,Tawau,Liew Chin Jin,Harapan,PKR,Harapan,PKR
P192,Sarawak,Mas Gading,Mordi Bimol,Harapan,DAP,Harapan,DAP
P193,Sarawak,Santubong,Wan Junaidi Tuanku Jaafar,BN,PBB,GPS,PBB
P194,Sarawak,Petra Jaya,Fadillah Yusof,BN,PBB,GPS,PBB
P195,Sarawak,Bandar Kuching,Kelvin Yii Lee Wuen,Harapan,DAP,Harapan,DAP
P196,Sarawak,Stampin,Chong Chieng Jen,Harapan,DAP,Harapan,DAP
P197,Sarawak,Kota Samarahan,Rubiah Wang,BN,PBB,GPS,PBB
P198,Sarawak,Puncak Borneo,Willie Mongin,Harapan,PKR,Harapan,PKR
P199,Sarawak,Serian,Richard Riot Jaem,BN,SUPP,GPS,SUPP
P200,Sarawak,Batang Sadong,Nancy Shukri,BN,PBB,GPS,PBB
P201,Sarawak,Batang Lupar,Rohani Karim,BN,PBB,GPS,PBB
P202,Sarawak,Sri Aman,Masir Kujat,BN,PRS,GPS,PRS
P203,Sarawak,Lubok Antu,Jugah AK Muyang,Independent,Independent,Harapan,PKR
P204,Sarawak,Betong,Robert Lawson Chuat,BN,PBB,GPS,PBB
P205,Sarawak,Saratok,Ali Biju ,Harapan,PKR,Harapan,PKR
P206,Sarawak,Tanjong Manis,Yusuf Abd Wahab,BN,PBB,GPS,PBB
P207,Sarawak,Igan,Ahmad Johnie Zawawi,BN,PBB,GPS,PBB
P208,Sarawak,Sarikei,Wong Ling Biu,Harapan,DAP,Harapan,DAP
P209,Sarawak,Julau,Larry Sng Wei Shien,Independent,Independent,Harapan,PKR
P210,Sarawak,Kanowit,Ago Dagang,BN,PRS,GPS,PRS
P211,Sarawak,Lanang,Alice Lau Kiong Yieng,Harapan,DAP,Harapan,DAP
P212,Sarawak,Sibu,Oscar Ling Chai Yew,Harapan,DAP,Harapan,DAP
P213,Sarawak,Mukah,Hanifah Hajar Taib,BN,PBB,GPS,PBB
P214,Sarawak,Selangau,Baru Bian,Harapan,PKR,Harapan,PKR
P215,Sarawak,Kapit,Alexander Nanta Linggi,BN,PBB,GPS,PBB
P216,Sarawak,Hulu Rajang,Ugak Kumbong,BN,PRS,GPS,PRS
P217,Sarawak,Bintulu,Tiong King Sing,BN,PDP,GPS,PDP
P218,Sarawak,Sibuti,Lukanisman Awang Sauni,BN,PBB,GPS,PBB
P219,Sarawak,Miri,Michael Teo Yu Keng,Harapan,PKR,Harapan,PKR
P220,Sarawak,Baram,Anyi Ngau,BN,PDP,GPS,PDP
P221,Sarawak,Limbang,Hasbi Habibollah,BN,PBB,GPS,PBB
P222,Sarawak,Lawas,Henry Sum Agong,BN,PBB,GPS,PBB

Ниже приведен javascript, который отображает диаграмму по умолчанию 

        chart = svg.selectAll('.rect')
        .data(latestSeat)
        .enter()
        .append('rect')
        .attr('width', 18)
        .attr('height', 18)
        .attr('x', (d, i) => {
            let rowIndex = i % numRows
            return (rowIndex * 22)
        })
        .attr('y', (d, i) => {
            let colIndex = Math.floor(i / numRows)
            return (colIndex * 22)
        })
        .attr('transform', 'translate(10, 82)')
        .style('fill', (d) => {
            return campColor(d);
        })
        .on('mouseover', function(d){
            div.transition()
            .duration(100)
            .style('opacity', 1);

            d3.select(this).style('fill', '#3d3');

            div.html("<span style = 'font-weight: bold'>" + d.par_code + " " + d.ge14_constituency + "</span>" + "<br>" + "<span style = 'font-style: italic'>" + d.mp_name + " " + "(" + d.dec_2018_party + ")" + "</span>")
            .style('font-family', 'Helvetica')

          div.style('visibility', 'visible')
          .style('left', (d3.event.pageX - 20) + 'px')    
          .style('top', (d3.event.pageY - 35) + 'px')
        })
          .on('mousemove', function(d){
          div.style("left", (d3.event.pageX - 20) + "px")    
          .style("top", (d3.event.pageY - 65) + "px")
        })
        .on("mouseout", function(d){
          div.transition()
          .duration(500)
          div.style('visibility', 'hidden')
          var element = d3.select(this)
          element.style('fill', campColor)
        })

// function for changing color
function campColor(d) {
        if (d.dec_2018_camp === 'Harapan') {
            return 'rgba(237,28,36,1)'
        } else if (d.dec_2018_camp === 'BN') {
            return 'rgba(0,0,128,1)'
        } else if (d.dec_2018_camp === 'PAS') {
            return 'rgba(0,144,0,1)'
        } else if (d.dec_2018_camp === 'GPS') {
            return 'rgba(254,223,0,1)'
        } else if (d.dec_2018_camp === 'GBS') {
            return 'rgba(26,26,26,1)'
        } else if (d.dec_2018_camp === 'Warisan') {
            return 'rgba(237,28,36,0.67)'
        } else if (d.dec_2018_camp === 'Upko') {
            return 'rgba(237,28,36,0.33)'
        } else {
            return 'rgba(230,230,230,1)';
        }
    }

Это прослушиватели событий 

        d3.select('#latest').on('click', () => {
        changeChart(latestSeat, 'dec_2018_camp', 'dec_2018_party')
    });
    d3.select('#oldest').on('click', () => {
        changeChart(oldestSeat, 'may_2018_camp', 'may_2018_party')
    });

После того, как пользователь нажал одну из кнопок, он вызовет функцию changeChart, показанную ниже.

        function changeChart(data, camp, party) {
        chart.data(data)
            .transition()
            .style('fill', (d) => {
                return changeColor(d[camp]);
            })
            .on('mouseover', function(d) {
                div.transition()
                    .duration(100)
                    .style("opacity", 1)

                let element = d3.select(this);

                element.style("fill", "Black")
                div.html("<span style = 'font-weight: bold'>" + d.par_code + " " + d.ge14_constituency + "</span>" + "<br>" + "<span style = 'font-style: italic'>" + d.mp_name + " " + "(" + d[party] + ")" + "</span>")
                    .style("font-family", "Helvetica")

                div.style("visibility", "visible")
                    .style("left", (d3.event.pageX - 20) + "px")
                    .style("top", (d3.event.pageY - 35) + "px");

                chart.on('mousemove', () => {
                    div.style('left', (d3.event.pageX - 20))
                        .style('top', (d3.event.pageY - 65))
                })

            })
            .on("mouseout", () => {
                div.transition()
                    .duration(500);

                div.style("visibility", "hidden")
                let element = d3.select(this);

                element.style('fill', (d) => {
                    return changeColor(d[camp]);
                })
            });
    }

        function changeColor(d) {
        console.log(d);
        if (d === 'Harapan') {
            return 'rgba(237,28,36,1)'
        } else if (d === 'BN') {
            return 'rgba(0,0,128,1)'
        } else if (d === 'PAS') {
            return 'rgba(0,144,0,1)'
        } else if (d === 'GPS') {
            return 'rgba(254,223,0,1)'
        } else if (d === 'GBS') {
            return 'rgba(26,26,26,1)'
        } else if (d === 'Warisan') {
            return 'rgba(237,28,36,0.67)'
        } else if (d === 'Upko') {
            return 'rgba(237,28,36,0.33)'
        } else {
            return 'rgba(230,230,230,1)';
        }
    }

Однако функция changeColor работает неправильно.После срабатывания указателя мыши он продолжает ссылаться на указатель мыши в переменной диаграммы, а не указатель мыши в функции changeChart.

...