d3.js制作蜂巢圖表帶動畫效果

CarterLi 發布于2019-08-26 10:36 / 3326人閱讀

摘要：高斯模糊濾鏡創建添加模糊濾鏡添加輔助濾鏡添加模糊濾鏡添加輔助濾鏡重點說一下最后的，它的作用是把濾鏡效果和原圖混合起來。

以上是效果圖，本圖表使用d3.js v4制作。圖表主要功能是在六邊形格子中顯示數據，點擊底部圖標可以切換指定格子高亮顯示，圖表可以隨瀏覽器任意縮放。

1.圖表的主體結構是由正六邊形組成，使用d3生成六邊形可以使用d3-hexbin.js，生成六邊形比較方便，只要給定中心點坐標和半徑即可生成六邊形路徑，例如：

var r = 10; // 六邊形半徑
var pos = [[5,5],[10,10]]; // 六邊形中心點坐標數組
var hexbin = d3.hexbin() // 使用hexbin.hexagon()即可生成路徑
      .radius(r);
var bins = hexbin(pos); // 得到生成后的六邊形中心點坐標數組

2.圖表的主體使用了高斯模糊濾鏡，使畫面表現出發光效果，背景高亮顏色使用了顏色漸變濾鏡。在svg中使用濾鏡，必須定義在defs中。
高斯模糊濾鏡：

// 創建defs
var defs = svg.append("defs");
// 添加模糊濾鏡
var filterBlur = defs.append("filter")
 .attr("id", "filterBlur")
 .attr("x", -1.2)
 .attr("y", -1.2)
 .attr("width", 4)
 .attr("height", 4);
// 添加輔助濾鏡
filterBlur.append("feOffset")
 .attr("result", "offOut")
 .attr("in", "SourceGraphic")
 .attr("dx", 0)
 .attr("dy", 0);
// 添加模糊濾鏡
filterBlur.append("feGaussianBlur")
 .attr("result", "blurOut")
 .attr("in", "SourceGraphic")
 .attr("stdDeviation", 2);
// 添加輔助濾鏡
filterBlur.append("feBlend")
 .attr("in", "SourceGraphic")
 .attr("in2", "blurOut")
 .attr("mode", "multiply");

重點說一下最后的feBlend，它的作用是把濾鏡效果和原圖混合起來。使用濾鏡的話，直接給元素添加style("filter", "url(#filterBlur)")即可。
背景高亮使用了顏色漸變濾鏡：

// 添加放射性變換，生成空心填充顏色
var warnBg = defs.append("radialGradient")
        .attr("id", "bg")
        .attr("cx", 0.5)
        .attr("cy", 0.5)
        .attr("r", 0.5);
// 添加顏色
warnBg.append("stop")
        .attr("offset", 0.5)
        .attr("style", "stop-color:rgb(200,200,200);stop-opacity:0.4");
warnBg.append("stop")
        .attr("offset", 1)
        .attr("style", "stop-opacity:1;stop-color:rgb(123,123,123)");

其中涉及到的關鍵性技術就是這些，其他方面只要使用通用的d3方法就可實現。
需要注意的是，程序的結構要預先規劃好，最好把主要的功能模塊放在多帶帶一個函數中，方便調用和后期修改。

如果大家有什么想法或意見可以交流一下。

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

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

14個最好的 JavaScript 數據可視化庫

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

Mertens 2019-08-23 16:23 評論0 收藏0
2018年最佳JavaScript數據可視化和圖表庫

摘要：它有什么圖表加粗文字如何使用這個圖表庫可以通過存儲庫下載或通過包管理器安裝。數據可以直接從文件加載到圖表中。它有什么圖表如何使用該庫可在包管理器和他們自己的內容傳送網絡中使用。該庫專為風格的數據可視化而設計，提供一系列高度可配置的圖表。現在有很多圖表庫，但哪一個最好用？這可能取決于許多因素，如業務需求，數據類型，圖表本身的目的等等。在本文中，每個JavaScript圖表庫將與一些關鍵...

terasum 2019-08-02 11:51 評論0 收藏0
2018年最佳JavaScript數據可視化和圖表庫

摘要：它有什么圖表加粗文字如何使用這個圖表庫可以通過存儲庫下載或通過包管理器安裝。數據可以直接從文件加載到圖表中。它有什么圖表如何使用該庫可在包管理器和他們自己的內容傳送網絡中使用。該庫專為風格的數據可視化而設計，提供一系列高度可配置的圖表。現在有很多圖表庫，但哪一個最好用？這可能取決于許多因素，如業務需求，數據類型，圖表本身的目的等等。在本文中，每個JavaScript圖表庫將與一些關鍵...

dreambei 2019-08-29 17:08 評論0 收藏0
2018年最佳JavaScript數據可視化和圖表庫

摘要：它有什么圖表加粗文字如何使用這個圖表庫可以通過存儲庫下載或通過包管理器安裝。數據可以直接從文件加載到圖表中。它有什么圖表如何使用該庫可在包管理器和他們自己的內容傳送網絡中使用。該庫專為風格的數據可視化而設計，提供一系列高度可配置的圖表。現在有很多圖表庫，但哪一個最好用？這可能取決于許多因素，如業務需求，數據類型，圖表本身的目的等等。在本文中，每個JavaScript圖表庫將與一些關鍵...

archieyang 2019-08-23 12:36 評論0 收藏0
常用的數據可視化工具

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

philadelphia 2019-08-22 11:06 評論0 收藏0