D3.js 图表与ThingJS结合

回复

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';
    }
})
复制代码

最后效果如图：

[分享] D3.js 图表与ThingJS结合