資訊專欄INFORMATION COLUMN
摘要：高斯模糊濾鏡創(chuàng)建添加模糊濾鏡添加輔助濾鏡添加模糊濾鏡添加輔助濾鏡重點(diǎn)說一下最后的，它的作用是把濾鏡效果和原圖混合起來。
以上是效果圖，本圖表使用d3.js v4制作。圖表主要功能是在六邊形格子中顯示數(shù)據(jù)，點(diǎn)擊底部圖標(biāo)可以切換指定格子高亮顯示，圖表可以隨瀏覽器任意縮放。
1.圖表的主體結(jié)構(gòu)是由正六邊形組成，使用d3生成六邊形可以使用d3-hexbin.js，生成六邊形比較方便，只要給定中心點(diǎn)坐標(biāo)和半徑即可生成六邊形路徑，例如：
var r = 10; // 六邊形半徑
var pos = [[5,5],[10,10]]; // 六邊形中心點(diǎn)坐標(biāo)數(shù)組
var hexbin = d3.hexbin() // 使用hexbin.hexagon()即可生成路徑
.radius(r);
var bins = hexbin(pos); // 得到生成后的六邊形中心點(diǎn)坐標(biāo)數(shù)組
2.圖表的主體使用了高斯模糊濾鏡，使畫面表現(xiàn)出發(fā)光效果，背景高亮顏色使用了顏色漸變?yōu)V鏡。在svg中使用濾鏡，必須定義在defs中。
高斯模糊濾鏡：
// 創(chuàng)建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");
重點(diǎn)說一下最后的feBlend，它的作用是把濾鏡效果和原圖混合起來。使用濾鏡的話，直接給元素添加style("filter", "url(#filterBlur)")即可。
背景高亮使用了顏色漸變?yōu)V鏡：
// 添加放射性變換，生成空心填充顏色
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)");
其中涉及到的關(guān)鍵性技術(shù)就是這些，其他方面只要使用通用的d3方法就可實(shí)現(xiàn)。
需要注意的是，程序的結(jié)構(gòu)要預(yù)先規(guī)劃好，最好把主要的功能模塊放在多帶帶一個(gè)函數(shù)中，方便調(diào)用和后期修改。
如果大家有什么想法或意見可以交流一下。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106448.html
摘要：適用于，演示這是開發(fā)的一個(gè)簡(jiǎn)單的可視化庫(kù)，它允許你創(chuàng)建所有常用的圖表類型條形圖，樹形圖，折線圖，面積圖等?？梢暂p松地對(duì)折線圖和條形圖進(jìn)行混合和匹配以組合不同的數(shù)據(jù)集，這是非常棒的功能。 翻譯：瘋狂的技術(shù)宅原文：https://www.monterail.com/blo... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 你的程序有多...
摘要：它有什么圖表加粗文字如何使用這個(gè)圖表庫(kù)可以通過存儲(chǔ)庫(kù)下載或通過包管理器安裝。數(shù)據(jù)可以直接從文件加載到圖表中。它有什么圖表如何使用該庫(kù)可在包管理器和他們自己的內(nèi)容傳送網(wǎng)絡(luò)中使用。該庫(kù)專為風(fēng)格的數(shù)據(jù)可視化而設(shè)計(jì)，提供一系列高度可配置的圖表。 現(xiàn)在有很多圖表庫(kù)，但哪一個(gè)最好用？這可能取決于許多因素，如業(yè)務(wù)需求，數(shù)據(jù)類型，圖表本身的目的等等。在本文中，每個(gè)JavaScript圖表庫(kù)將與一些關(guān)鍵...
摘要：它有什么圖表加粗文字如何使用這個(gè)圖表庫(kù)可以通過存儲(chǔ)庫(kù)下載或通過包管理器安裝。數(shù)據(jù)可以直接從文件加載到圖表中。它有什么圖表如何使用該庫(kù)可在包管理器和他們自己的內(nèi)容傳送網(wǎng)絡(luò)中使用。該庫(kù)專為風(fēng)格的數(shù)據(jù)可視化而設(shè)計(jì)，提供一系列高度可配置的圖表。 現(xiàn)在有很多圖表庫(kù)，但哪一個(gè)最好用？這可能取決于許多因素，如業(yè)務(wù)需求，數(shù)據(jù)類型，圖表本身的目的等等。在本文中，每個(gè)JavaScript圖表庫(kù)將與一些關(guān)鍵...
摘要：它有什么圖表加粗文字如何使用這個(gè)圖表庫(kù)可以通過存儲(chǔ)庫(kù)下載或通過包管理器安裝。數(shù)據(jù)可以直接從文件加載到圖表中。它有什么圖表如何使用該庫(kù)可在包管理器和他們自己的內(nèi)容傳送網(wǎng)絡(luò)中使用。該庫(kù)專為風(fēng)格的數(shù)據(jù)可視化而設(shè)計(jì)，提供一系列高度可配置的圖表。 現(xiàn)在有很多圖表庫(kù)，但哪一個(gè)最好用？這可能取決于許多因素，如業(yè)務(wù)需求，數(shù)據(jù)類型，圖表本身的目的等等。在本文中，每個(gè)JavaScript圖表庫(kù)將與一些關(guān)鍵...
摘要：俗話說，不會(huì)使用工具來完成任務(wù)的都是進(jìn)化不完全的表現(xiàn)，大數(shù)據(jù)時(shí)代，可視化已經(jīng)深深鉆進(jìn)我們的生活，使用可視化工具也變的相當(dāng)普遍，今天我們來總結(jié)下當(dāng)下可視化工具都有哪些。是一個(gè)地圖庫(kù)，主要面向數(shù)據(jù)可視化用戶。 俗話說，不會(huì)使用工具來完成任務(wù)的都是進(jìn)化不完全的表現(xiàn)，大數(shù)據(jù)時(shí)代，可視化已經(jīng)深深鉆進(jìn)我們的生活，使用可視化工具也變的相當(dāng)普遍，今天我們來總結(jié)下當(dāng)下可視化工具都有哪些。 showImg...
閱讀 657·2021-11-25 09:43
閱讀 1928·2021-11-17 09:33
閱讀 842·2021-09-07 09:58
閱讀 2076·2021-08-16 10:52
閱讀 494·2019-08-30 15:52
閱讀 1736·2019-08-30 15:43
閱讀 1015·2019-08-30 15:43
閱讀 2938·2019-08-29 16:41
