d3.js交互圖表

Miracle 發布于2019-08-23 16:46 / 1921人閱讀

摘要：如果對原生還有比較熟悉的話，的交互很快就能掌握還是拿完整的柱形圖例子修改完整的柱圖通過對元素進行事件綁定或移除，用法很簡單，例如注意這里使用才有指向對應元素用法和原生及幾乎一樣給柱狀圖進行事件綁定這里我們使得鼠標懸浮的柱狀圖顏色變為中，元素

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

selection.on()

d3通過selection.on()對元素進行事件綁定或移除，用法很簡單，例如：

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

注意這里使用function(){}才有this指向對應元素
用法和原生JS及jq幾乎一樣

給柱狀圖進行事件綁定

這里我們使得鼠標懸浮的柱狀圖顏色變為lightblue
svg中，元素屬性的優先級為0，為方便之前的demo，這里添加class名來改變矩形的樣式

.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"); //通過class改變樣式
    })
    .on("mouseout", function () {
        d3.select(this)
            .attr("class", null);
    });

總結

很簡單吧，沒啥好說的，主要是一開始不了解svg樣式的優先級查閱了資料，沒想到優先級權重是0（翻譯錯了請指出
源代碼

參考資料

交互式操作
Handling Events
Presentation attributes

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103271.html

常用的數據可視化工具

摘要：俗話說，不會使用工具來完成任務的都是進化不完全的表現，大數據時代，可視化已經深深鉆進我們的生活，使用可視化工具也變的相當普遍，今天我們來總結下當下可視化工具都有哪些。是一個地圖庫，主要面向數據可視化用戶。俗話說，不會使用工具來完成任務的都是進化不完全的表現，大數據時代，可視化已經深深鉆進我們的生活，使用可視化工具也變的相當普遍，今天我們來總結下當下可視化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 評論0 收藏0
14個最好的 JavaScript 數據可視化庫

摘要：適用于，演示這是開發的一個簡單的可視化庫，它允許你創建所有常用的圖表類型條形圖，樹形圖，折線圖，面積圖等。可以輕松地對折線圖和條形圖進行混合和匹配以組合不同的數據集，這是非常棒的功能。翻譯：瘋狂的技術宅原文：https://www.monterail.com/blo... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮的前端技術文章你的程序有多...

Mertens 2019-08-23 16:23 評論0 收藏0
11個React Native 組件庫和 Javascript 數據可視化庫

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

tangr206 2019-08-23 17:11 評論0 收藏0
12個值得關注的頂級可視化JS庫涉及圖表、動畫、時間處理，表格操作

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

JinB 2019-08-20 14:14 評論0 收藏0