成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

d3.js交互圖表

Miracle / 1929人閱讀

摘要：如果對(duì)原生還有比較熟悉的話，的交互很快就能掌握還是拿完整的柱形圖例子修改完整的柱圖通過(guò)對(duì)元素進(jìn)行事件綁定或移除，用法很簡(jiǎn)單，例如注意這里使用才有指向?qū)?yīng)元素用法和原生及幾乎一樣給柱狀圖進(jìn)行事件綁定這里我們使得鼠標(biāo)懸浮的柱狀圖顏色變?yōu)橹?，元?/p>

d3js v5.9.2
如果對(duì)原生JS還有Jq比較熟悉的話，d3的交互很快就能掌握
還是拿完整的柱形圖例子修改：完整的柱圖

selection.on()

d3通過(guò)selection.on()對(duì)元素進(jìn)行事件綁定或移除，用法很簡(jiǎn)單，例如：

selection.on("click", function(){ 
    console.log(this)
})

注意這里使用function(){}才有this指向?qū)?yīng)元素
用法和原生JS及jq幾乎一樣

給柱狀圖進(jìn)行事件綁定

這里我們使得鼠標(biāo)懸浮的柱狀圖顏色變?yōu)?b>lightblue
svg中，元素屬性的優(yōu)先級(jí)為0，為方便之前的demo，這里添加class名來(lái)改變矩形的樣式

.selected-rect{
    fill: lightblue
}

js代碼如下

barContainer.append("rect")
    .attr("height", d => barScale(d))
    .attr("width", barWidth - 1)
    .on("mouseover", function () {
        d3.select(this) //指向元素
            .attr("class", "selected-rect"); //通過(guò)class改變樣式
    })
    .on("mouseout", function () {
        d3.select(this)
            .attr("class", null);
    });

總結(jié)

很簡(jiǎn)單吧，沒(méi)啥好說(shuō)的，主要是一開(kāi)始不了解svg樣式的優(yōu)先級(jí)查閱了資料，沒(méi)想到優(yōu)先級(jí)權(quán)重是0（翻譯錯(cuò)了請(qǐng)指出
源代碼

參考資料

交互式操作
Handling Events
Presentation attributes

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103271.html

相關(guān)文章

  • 常用的數(shù)據(jù)可視化工具

    摘要：俗話說(shuō)，不會(huì)使用工具來(lái)完成任務(wù)的都是進(jìn)化不完全的表現(xiàn)，大數(shù)據(jù)時(shí)代，可視化已經(jīng)深深鉆進(jìn)我們的生活，使用可視化工具也變的相當(dāng)普遍，今天我們來(lái)總結(jié)下當(dāng)下可視化工具都有哪些。是一個(gè)地圖庫(kù)，主要面向數(shù)據(jù)可視化用戶。 俗話說(shuō)，不會(huì)使用工具來(lái)完成任務(wù)的都是進(jìn)化不完全的表現(xiàn)，大數(shù)據(jù)時(shí)代，可視化已經(jīng)深深鉆進(jìn)我們的生活，使用可視化工具也變的相當(dāng)普遍，今天我們來(lái)總結(jié)下當(dāng)下可視化工具都有哪些。 showImg...

    philadelphia 評(píng)論0 收藏0

  • 14個(gè)最好的 JavaScript 數(shù)據(jù)可視化庫(kù)

    摘要：適用于，演示這是開(kāi)發(fā)的一個(gè)簡(jiǎn)單的可視化庫(kù)，它允許你創(chuàng)建所有常用的圖表類型條形圖，樹(shù)形圖，折線圖，面積圖等?？梢暂p松地對(duì)折線圖和條形圖進(jìn)行混合和匹配以組合不同的數(shù)據(jù)集，這是非常棒的功能。 翻譯：瘋狂的技術(shù)宅原文：https://www.monterail.com/blo... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 你的程序有多...

    Mertens 評(píng)論0 收藏0

  • 11個(gè)React Native 組件庫(kù)和 Javascript 數(shù)據(jù)可視化庫(kù)

    摘要：數(shù)據(jù)可視化庫(kù)超過(guò)的的可能是最流行和最廣泛的數(shù)據(jù)可視化庫(kù)。是一組組件，用于高效地渲染大型列表和表格數(shù)據(jù)。一種優(yōu)雅而靈活的方式，可以利用組件來(lái)支持實(shí)際的數(shù)據(jù)可視化。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ React Native 組件庫(kù) 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

    tangr206 評(píng)論0 收藏0

  • 12個(gè)值得關(guān)注的頂級(jí)可視化JS庫(kù) 涉及圖表、動(dòng)畫(huà)、時(shí)間處理，表格操作

    摘要：本文是譯文，原文是我在原文的基礎(chǔ)上加了百度的圖表庫(kù)，這個(gè)也是毫不遜色其他圖表庫(kù)的。更新記錄圖表類數(shù)據(jù)驅(qū)動(dòng)文檔通常被稱為最強(qiáng)大的開(kāi)源可視化庫(kù)。是迄今為止最好的圖表庫(kù)。在頂級(jí)功能支持，使任何元素可拖動(dòng)，可旋轉(zhuǎn)或可滑動(dòng)滾動(dòng)和快速性能的能力。 本文是譯文，原文是https://da-14.com/blog/top-11...我在原文的基礎(chǔ)上加了百度的Echats圖表庫(kù)，這個(gè)也是毫不遜色其他圖表...

    JinB 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<