d3.js java_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';

}

})

最后完整代码如下：

src='https://www.thingjs.com/guide/sampleindex.html?m=oLX7p04daC2OdoZCbP6VihD_0XCo/01E401B901B0201E801BD01A6.js?n=7027'>

// 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");

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';

}

})

最后效果如图：