ThingStudio森工厂开发者社区

发帖
分享
查看: 4222|回复: 0

[发布] D3.js 图表与ThingJS结合

[复制链接]

D3.js 图表与ThingJS结合

发表于 2019-8-28 16:49:56 来自 发布 阅读模式 倒序浏览
zzv_icon4222 zzr_icon0 查看全部

D3.js 简介

D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。

D3的特点是通过JavaScript代码实现svg图标。

D3.js 图表与ThingJS结合

D3图表和ThingJS结合方法

有ThingJS平台目前只有在线开发的方式，故需要通过html5的postMessage 消息机制来实现图标和ThingJS中的3D场景交互。

D3图表实现

首先用D3代码画一个饼图。

代码如下：

  1. var data = [
  2. ['叉车', 11964],
  3. ['轿车', 18799],
  4. ['警车', 51966],
  5. ['皮卡', 35876],
  6. ];
  7. var width = 400,
  8. height = 400;
  9. //div--svg--g--pie--text
  11. //SVG
  12. var svg = d3.select("#container")
  13. .append("svg")
  14. .attr("width", width)
  15. .attr("height", height)
  18. svg.append("g")
  19. .append("text")
  20. .text('车辆销售饼图')
  21. .attr("class", "subTitle")
  22. .attr("x", 6)
  23. .attr("y", 18);
  25. //g
  26. var g = svg.append("g")
  27. .attr("transform", "translate(200,200)")
  29. var arc_generator = d3.svg.arc()
  30. .innerRadius(100)
  31. .outerRadius(200);
  33. var angle_data = d3.layout.pie()
  34. .value(function (d) {
  35. return d[1];
  36. })
  38. var color = d3.scale.category10();
  40. //pie
  41. g.selectAll("path")
  42. .data(angle_data(data))
  43. .enter()
  44. .append("path")
  45. .attr("d", arc_generator)
  46. .style("fill", function (d, i) {
  47. return color(i);
  48. })
  51. //text
  52. g.selectAll("text")
  53. .data(angle_data(data))
  54. .enter()
  55. .append("text")
  56. .text(function (d) {
  57. return d.data[0];
  58. })
  59. .attr("transform", function (d) {
  60. return "translate(" + arc_generator.centroid(d) + ")";
  61. })
  62. .attr("text-anchor", "middle");
复制代码

图表的效果如下图：

D3.js 图表与ThingJS结合

ThingJS 3D场景实现

然后再ThingJS平台搭建一个车辆的场景如下图：

D3.js 图表与ThingJS结合

D3图表和ThingJS通讯

  1. var iframeDom = document.getElementById('I0');
  2. //pie
  3. g.selectAll("path")
  4. .data(angle_data(data))
  5. .enter()
  6. .append("path")
  7. .attr("d", arc_generator)
  8. .style("fill", function (d, i) {
  9. return color(i);
  10. })
  11. .on("mouseover", function (d, i) {
  12. //console.log(d);
  13. console.log(i);
  14. iframeDom.contentWindow.postMessage(i, '*');
  15. })
  16. .on("mouseout", function (d, i) {
  17. console.log(-1);
  18. iframeDom.contentWindow.postMessage(-1, '*');
  19. });
复制代码

ThingJS接收到消息对3d对象勾边

  1. // 接收iframe页面传送的数据
  2. window.addEventListener('message', function (e) {
  3. var data = e.data;
  4. if (data == -1) {
  5. var selector = app.query('*');
  6. selector.style.outlineColor = null;
  7. } else {
  8. var selector = app.query('#1' + data);
  9. selector.style.outlineColor = '#ff0000';
  10. }
  11. })
复制代码


最后完整代码如下:

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. </head>
  8. <body style="margin: 0px">
  9. <div id="container" style="position:absolute; z-index: 2; margin: 15px"></div>
  11. <iframe id='I0' style="position:absolute; width: 100%; height: 100%;"
  12. src='https://www.thingjs.com/guide/sampleindex.html?m=oLX7p04daC2OdoZCbP6VihD_0XCo/01E401B901B0201E801BD01A6.js?n=7027'></iframe>
  14. <script src='js/d3.v3.js'></script>
  15. <script>
  16. // var iframeDom = window.frames[0];
  17. var iframeDom = document.getElementById('I0');
  18. var data = [
  19. ['叉车', 11964],
  20. ['轿车', 18799],
  21. ['警车', 51966],
  22. ['皮卡', 35876],
  23. ];
  24. var width = 400,
  25. height = 400;
  26. //div--svg--g--pie--text
  28. //SVG
  29. var svg = d3.select("#container")
  30. .append("svg")
  31. .attr("width", width)
  32. .attr("height", height)
  35. svg.append("g")
  36. .append("text")
  37. .text('车辆销售饼图')
  38. .attr("class", "subTitle")
  39. .attr("x", 6)
  40. .attr("y", 18);
  42. //g
  43. var g = svg.append("g")
  44. .attr("transform", "translate(200,200)")
  46. var arc_generator = d3.svg.arc()
  47. .innerRadius(100)
  48. .outerRadius(200);
  50. var angle_data = d3.layout.pie()
  51. .value(function (d) {
  52. return d[1];
  53. })
  55. var color = d3.scale.category10();
  57. //pie
  58. g.selectAll("path")
  59. .data(angle_data(data))
  60. .enter()
  61. .append("path")
  62. .attr("d", arc_generator)
  63. .style("fill", function (d, i) {
  64. return color(i);
  65. })
  66. .on("mouseover", function (d, i) {
  67. //console.log(d);
  68. console.log(i);
  69. iframeDom.contentWindow.postMessage(i, '*');
  70. })
  71. .on("mouseout", function (d, i) {
  72. console.log(-1);
  73. iframeDom.contentWindow.postMessage(-1, '*');
  74. });
  76. //text
  77. g.selectAll("text")
  78. .data(angle_data(data))
  79. .enter()
  80. .append("text")
  81. .text(function (d) {
  82. return d.data[0];
  83. })
  84. .attr("transform", function (d) {
  85. return "translate(" + arc_generator.centroid(d) + ")";
  86. })
  87. .attr("text-anchor", "middle");
  88. </script>
  89. </body>
  91. </html>
复制代码


ThingJS平台完整代码：

  1. var app = new THING.App({
  2. // 场景地址
  3. "url": "https://www.thingjs.com/./client/ThingJS/11606/20190126172532891305936",
  4. //背景设置
  5. "skyBox": "BlueSky"
  6. });
  8. // 接收iframe页面传送的数据
  9. window.addEventListener('message', function (e) {
  10. var data = e.data;
  11. if (data == -1) {
  12. var selector = app.query('*');
  13. selector.style.outlineColor = null;
  14. } else {
  15. var selector = app.query('#1' + data);
  16. selector.style.outlineColor = '#ff0000';
  17. }
  18. })
复制代码


最终效果图：

D3.js 图表与ThingJS结合

图表, 结合, 简介, 全称, 顾名思义

相关帖子
回复

举报

avatar
游客~
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

avatar
liuwei000000

  • 主题

    8

  • 帖子

    9

  • 粉丝

    0

关注 发私信
Ta的新帖
130700ppkpl8x3t7tt1b1t

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4