D3.js 图表与ThingJS结合
程序员文章站
2022-12-22 08:53:07
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';
}
})
最后效果如图：