请选择 进入手机版 | 继续访问电脑版
分享
查看: 1912|回复: 0

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

[复制链接]

D3.js 图表与ThingJS结合

发表于 2019-9-10 11:30:54 来自 分享 阅读模式 倒序浏览
zzv_icon1912 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
  10. //SVG
  11. var svg = d3.select("#container")
  12. .append("svg")
  13. .attr("width", width)
  14. .attr("height", height)
  15. svg.append("g")
  16. .append("text")
  17. .text('车辆销售饼图')
  18. .attr("class", "subTitle")
  19. .attr("x", 6)
  20. .attr("y", 18);
  21. //g
  22. var g = svg.append("g")
  23. .attr("transform", "translate(200,200)")
  24. var arc_generator = d3.svg.arc()
  25. .innerRadius(100)
  26. .outerRadius(200);
  27. var angle_data = d3.layout.pie()
  28. .value(function (d) {
  29. return d[1];
  30. })
  31. var color = d3.scale.category10();
  32. //pie
  33. g.selectAll("path")
  34. .data(angle_data(data))
  35. .enter()
  36. .append("path")
  37. .attr("d", arc_generator)
  38. .style("fill", function (d, i) {
  39. return color(i);
  40. })
  41. //text
  42. g.selectAll("text")
  43. .data(angle_data(data))
  44. .enter()
  45. .append("text")
  46. .text(function (d) {
  47. return d.data[0];
  48. })
  49. .attr("transform", function (d) {
  50. return "translate(" + arc_generator.centroid(d) + ")";
  51. })
  52. .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>
  3. <head>
  4. <meta charset="UTF-8">
  5. </head>
  6. <body style="margin: 0px">
  7. <div id="container" style="position:absolute; z-index: 2; margin: 15px"></div>
  8. <iframe id='I0' style="position:absolute; width: 100%; height: 100%;"
  9. src='https://www.thingjs.com/guide/sampleindex.html?m=oLX7p04daC2OdoZCbP6VihD_0XCo/01E401B901B0201E801BD01A6.js?n=7027'></iframe>
  10. <script src='js/d3.v3.js'></script>
  11. <script>
  12. // var iframeDom = window.frames[0];
  13. var iframeDom = document.getElementById('I0');
  14. var data = [
  15. ['叉车', 11964],
  16. ['轿车', 18799],
  17. ['警车', 51966],
  18. ['皮卡', 35876],
  19. ];
  20. var width = 400,
  21. height = 400;
  22. //div--svg--g--pie--text
  23. //SVG
  24. var svg = d3.select("#container")
  25. .append("svg")
  26. .attr("width", width)
  27. .attr("height", height)
  28. svg.append("g")
  29. .append("text")
  30. .text('车辆销售饼图')
  31. .attr("class", "subTitle")
  32. .attr("x", 6)
  33. .attr("y", 18);
  34. //g
  35. var g = svg.append("g")
  36. .attr("transform", "translate(200,200)")
  37. var arc_generator = d3.svg.arc()
  38. .innerRadius(100)
  39. .outerRadius(200);
  40. var angle_data = d3.layout.pie()
  41. .value(function (d) {
  42. return d[1];
  43. })
  44. var color = d3.scale.category10();
  45. //pie
  46. g.selectAll("path")
  47. .data(angle_data(data))
  48. .enter()
  49. .append("path")
  50. .attr("d", arc_generator)
  51. .style("fill", function (d, i) {
  52. return color(i);
  53. })
  54. .on("mouseover", function (d, i) {
  55. //console.log(d);
  56. console.log(i);
  57. iframeDom.contentWindow.postMessage(i, '*');
  58. })
  59. .on("mouseout", function (d, i) {
  60. console.log(-1);
  61. iframeDom.contentWindow.postMessage(-1, '*');
  62. });
  63. //text
  64. g.selectAll("text")
  65. .data(angle_data(data))
  66. .enter()
  67. .append("text")
  68. .text(function (d) {
  69. return d.data[0];
  70. })
  71. .attr("transform", function (d) {
  72. return "translate(" + arc_generator.centroid(d) + ")";
  73. })
  74. .attr("text-anchor", "middle");
  75. </script>
  76. </body>
  77. </html>
复制代码

ThingJS平台完整代码:

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

最后效果如图:

D3.js 图表与ThingJS结合


avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t