D3.js 圖表與ThingJS結合

来源:https://www.cnblogs.com/ThingJS3D/archive/2019/07/15/11189616.html
-Advertisement-
Play Games

D3.js 簡介D3 的全稱是（Data-Driven Documents），顧名思義可以知道是一個被數據驅動的文檔。聽名字有點抽象，說簡單一點，其實就是一個 JavaScript 的函數庫，使用它主要是用來做數據可視化的。 D3的特點是通過JavaScript代碼實現svg圖標。 D3圖表和Thi ...


D3.js 簡介
D3 的全稱是（Data-Driven Documents），顧名思義可以知道是一個被數據驅動的文檔。聽名字有點抽象，說簡單一點，其實就是一個 JavaScript 的函數庫，使用它主要是用來做數據可視化的。

D3的特點是通過JavaScript代碼實現svg圖標。

D3圖表和ThingJS結合方法
有ThingJS平臺目前只有線上開發的方式，故需要通過html5的postMessage 消息機制來實現圖標和ThingJS中的3D場景交互。

 

D3圖表實現
首先用D3代碼畫一個餅圖。

代碼如下：

		var data = [
			['叉車', 11964],
			['轎車', 18799],
			['警車', 51966],
			['皮卡', 35876],
		];
		var width = 400,
			height = 400;
		//div--svg--g--pie--text
 
		//SVG
		var svg = d3.select("#container")
			.append("svg")
			.attr("width", width)
			.attr("height", height)
 
 
		svg.append("g")
			.append("text")
			.text('車輛銷售餅圖')
			.attr("class", "subTitle")
			.attr("x", 6)
			.attr("y", 18);
 
		//g
		var g = svg.append("g")
			.attr("transform", "translate(200,200)")
 
		var arc_generator = d3.svg.arc()
			.innerRadius(100)
			.outerRadius(200);
 
		var angle_data = d3.layout.pie()
			.value(function (d) {
				return d[1];
			})
 
		var color = d3.scale.category10();
 
		//pie
		g.selectAll("path")
			.data(angle_data(data))
			.enter()
			.append("path")
			.attr("d", arc_generator)
			.style("fill", function (d, i) {
				return color(i);
			})
			
 
		//text
		g.selectAll("text")
			.data(angle_data(data))
			.enter()
			.append("text")
			.text(function (d) {
				return d.data[0];
			})
			.attr("transform", function (d) {
				return "translate(" + arc_generator.centroid(d) + ")";
			})
			.attr("text-anchor", "middle");

圖表的效果如下圖：

 

ThingJS 3D場景實現
然後在ThingJS平臺搭建一個車輛的場景如下圖：

D3圖表和ThingJS通訊

    var iframeDom = document.getElementById('I0');
    //pie
		g.selectAll("path")
			.data(angle_data(data))
			.enter()
			.append("path")
			.attr("d", arc_generator)
			.style("fill", function (d, i) {
				return color(i);
			})
			.on("mouseover", function (d, i) {
				//console.log(d);
				console.log(i);
				iframeDom.contentWindow.postMessage(i, '*');
			})
			.on("mouseout", function (d, i) {
				console.log(-1);
				iframeDom.contentWindow.postMessage(-1, '*');
			});

 

ThingJS接收到消息對3d對象勾邊

// 接收iframe頁面傳送的數據
window.addEventListener('message', function (e) {
    var data = e.data;
    if (data == -1) {
        var selector = app.query('*');
        selector.style.outlineColor = null;
    } else {
        var selector = app.query('#1' + data);
        selector.style.outlineColor = '#ff0000';
    }
})

 

最後完整代碼如下：

<!DOCTYPE html>
<html>
 
<head>
	<meta charset="UTF-8">
</head>
 
<body style="margin: 0px">
	<div id="container" style="position:absolute; z-index: 2; margin: 15px"></div>
 
	<iframe id='I0' style="position:absolute; width: 100%; height: 100%;"
		src='https://www.thingjs.com/guide/sampleindex.html?m=oLX7p04daC2OdoZCbP6VihD_0XCo/01E401B901B0201E801BD01A6.js?n=7027'></iframe>
 
	<script src='js/d3.v3.js'></script>
	<script>
		// var iframeDom = window.frames[0];
		var iframeDom = document.getElementById('I0');
		var data = [
			['叉車', 11964],
			['轎車', 18799],
			['警車', 51966],
			['皮卡', 35876],
		];
		var width = 400,
			height = 400;
		//div--svg--g--pie--text
 
		//SVG
		var svg = d3.select("#container")
			.append("svg")
			.attr("width", width)
			.attr("height", height)
 
 
		svg.append("g")
			.append("text")
			.text('車輛銷售餅圖')
			.attr("class", "subTitle")
			.attr("x", 6)
			.attr("y", 18);
 
		//g
		var g = svg.append("g")
			.attr("transform", "translate(200,200)")
 
		var arc_generator = d3.svg.arc()
			.innerRadius(100)
			.outerRadius(200);
 
		var angle_data = d3.layout.pie()
			.value(function (d) {
				return d[1];
			})
 
		var color = d3.scale.category10();
 
		//pie
		g.selectAll("path")
			.data(angle_data(data))
			.enter()
			.append("path")
			.attr("d", arc_generator)
			.style("fill", function (d, i) {
				return color(i);
			})
			.on("mouseover", function (d, i) {
				//console.log(d);
				console.log(i);
				iframeDom.contentWindow.postMessage(i, '*');
			})
			.on("mouseout", function (d, i) {
				console.log(-1);
				iframeDom.contentWindow.postMessage(-1, '*');
			});
 
		//text
		g.selectAll("text")
			.data(angle_data(data))
			.enter()
			.append("text")
			.text(function (d) {
				return d.data[0];
			})
			.attr("transform", function (d) {
				return "translate(" + arc_generator.centroid(d) + ")";
			})
			.attr("text-anchor", "middle");
	</script>
</body>
 
</html>

　

ThingJS平臺完整代碼：

var app = new THING.App({
    // 場景地址
    "url": "https://www.thingjs.com/./client/ThingJS/11606/20190126172532891305936",
    //背景設置
    "skyBox": "BlueSky"
});
 
// 接收iframe頁面傳送的數據
window.addEventListener('message', function (e) {
    var data = e.data;
    if (data == -1) {
        var selector = app.query('*');
        selector.style.outlineColor = null;
    } else {
        var selector = app.query('#1' + data);
        selector.style.outlineColor = '#ff0000';
    }
})

最後效果如圖：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前端之：傳統的DOM是如何渲染的?
    a.純後端渲染:頁面發送請求，後端伺服器中將數據拼成完整DOM樹，並轉換成一個位元組流作為HTTP Response的body返回給瀏覽器。優點在於 返回的HTTP Response是包含著全部頁面內容，可以讓用戶更加快捷的看到頁面的主體部分。也方便了網站的seo（搜索引擎優 化）。 b.純前端渲染 ...
  • 前端 -- jQuery
    jQuery引入 下載鏈接: [jQuery官網](https://jquery.com/)，首先需要下載這個jQuery的文件，然後在HTML文件中引入這個文件，就可以使用這個文件中幫我們提供的jquery的介面了。 引入: <script src = 'jquery.js'> </script> ...
  • JavaScript迴圈及輸出方式
    好一段時間沒寫了，今天寫一下JavaScript的迴圈和輸出吧！ 其實JavaScrip的迴圈跟C#、Java的迴圈用法是相同的。 先在說一下輸出語句！ JavaScript 可以通過不同的方式來輸出數據： 使用 window.alert() 彈出警告框。 使用 document.write() 方 ...
  • nodejs進階（1）——npm使用技巧和最佳實踐
    nodejs進階教程，小白繞道！！！ npm使用技巧和最佳實踐 前提：請確保全裝了node.js npm的最佳實踐 npm install是最常見的npm cli命令，但是它還有更多能力！接下來你會瞭解npm是如何在應用的整個生命周期幫助你的-從創建一個項目到開發和部署整個生命周期 認識npm 在開 ...
  • Web前端學習，需用瞭解的7大HTML知識點
    HTML是web前端開發基礎，關於HTML，這裡有幾個很重要的知識點，在日常開發常常用到，並且在大家面試的時候也會問的，記住這7個重要知識點，助你在面試時優先錄用。 1、網頁結構 網頁結構一般都包含文檔聲明DOCTYPE，並且在head中的meta應該包含編碼格式、關鍵字、網頁描述信息。簡單格式如下 ...
  • JavaScript-瀏覽器的三種彈窗方式
    在做網頁時，常常使用彈窗，以上就是瀏覽器的三種彈窗方式， 1： alert 在測試時常用 2： confirm 可以套用if...else 來用 ，比如 ：confirm點擊了確定做什麼事情，點擊了取消又做什麼事情 3： prompt 彈窗輸入 ； 可以給網頁設置密碼。 以上是我個人對三種彈窗的見解 ...
  • HTML中的圖片標簽的用法！
    在HTML中<img>這個標簽是定義文本中的圖片標簽，它的作用就比如說可以提供圖片的名字、提供圖片的尺寸大小和提供圖片的一些圖片屬性，比如Alt這個屬性，可以給圖片一個名稱來告訴朋友們。這個也是對seo優化的一種細節上的方式。這樣做可以讓百度蜘蛛可以知道你這個圖片是個什麼東西，或者說，當你發佈這個圖 ...
  • uniapp之w-picker使用採坑
    1. uniapp之w picker使用採坑 1.1. 前言 由於我是先在index頁面集合了這個組件，發現該文件內容實在太多了，不好維護，所以打算把內容一個個抽成組件，在抽w picker時，遇到了兩個問題 1. 點擊取消，會調用方法，但不會產生取消隱藏效果，點擊確認也一樣，確認函數的確調用了，但 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類