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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類