d3.v4.js数据可视化 力导向图 force 产业链

矫情吗;* 2021-11-22 10:08 549阅读 0赞

PC和APP(手机网页版均可)静态图(我录好的视频不能上传)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
d3.v4 中文API文档地址https://github.com/xswei/d3js\_doc/blob/master/API\_Reference/API.md
d3.js 力导向图中默认提供了 5 种作用力:

中心力(Centering)
中心力作用于所有的节点而不是某些单独节点,可以将所有的节点的中心一致的向指定的位置移动,而且这种移动不会修改速度也不会影响节点间的相对位置。
碰撞力(Collision)
碰撞力将每个节点视为一个具有一定半径的圆,这个力会阻止代表节点的这个圆相互重叠,即两个节点间会相互碰撞,可以通过设置 strength 设置这个碰撞力的强度。
弹簧力(Links)
当两个节点通过设置 link 连接到一起后,可以设置弹簧力,这个力将根据两个节点间的距离将两个节点拉近或推远,力的强度和这个距离成比例就和弹簧一样。
电荷力(Many-Body)
通过设置 strength 来模拟所有节点间的相互作用力,如果为正节点间就会相互吸引,可以用来模拟电荷吸引力,如果为负节点间就会相互排斥。这个力的大小也和节点间的距离有关。
定位力(Positioning)
这个力可以将节点沿着指定的维度推向一个指定位置,比如通过设置 forceX 和 forceY 就可以在 X轴 和 Y轴 方向推或者拉所有的节点,forceRadial 则可以形成一个圆环把所有的节点都往这个圆环上相应的位置推。

部分代码

  1. var simulation = d3.forceSimulation()
  2. .alpha(1.5)
  3. .alphaMin(0.001)
  4. .alphaDecay(0.0228)
  5. .alphaTarget(0)
  6. .force("link", d3.forceLink()
  7. .links(links)
  8. .id(function (d) {
  9. return d.index;
  10. })
  11. )
  12. .force("charge", d3.forceManyBody().strength(stren))
  13. .force("collide", d3.forceCollide(function (d) {
  14. var v = 0
  15. if (grade(d.type) === 1) {
  16. v = bigW - 60
  17. } else if (d.is_back === 0 || d.is_back === 1) {
  18. v = 20
  19. } else if (grade(d.type) === 2) {
  20. v = cv + 20
  21. } else if (grade(d.type) === 3) {
  22. v = cv
  23. }
  24. return v
  25. })
  26. .strength(0.2)
  27. .iterations(5))
  28. .nodes(nodes)
  29. .on('tick', tick)
  30. if (!isPc) {
  31. simulation.force("center", d3.forceCenter(width / divW, height / divH))
  32. }
  33. var zooms = d3.zoom()
  34. .scaleExtent([0.5, 1.5])
  35. .on("zoom", zoomed);
  36. function zoomed () {
  37. svg.selectAll(".svg_g").attr("transform",d3.event.transform)
  38. if (!isforbid) {
  39. var x = d3.event.transform.x
  40. var y = d3.event.transform.y
  41. var s = d3.event.transform.k
  42. if (s === scaled ) {
  43. if (x - sumX > 10) {
  44. animation(img_name_l, 1.3)
  45. animation(img_name_r, 1)
  46. } else if (x - sumX < -10) {
  47. animation(img_name_r, 1.3)
  48. animation(img_name_l, 1)
  49. } else if (y - sumY > 10 && Math.abs(x - sumX) < 10) {
  50. animation(img_name_t, 1.3)
  51. animation(img_name_b, 1)
  52. } else if (y - sumY < -10 && Math.abs(x - sumX) < 10) {
  53. animation(img_name_b, 1.3)
  54. animation(img_name_t, 1)
  55. }
  56. }
  57. scaled = s
  58. sumX = x
  59. sumY = y
  60. }
  61. }
  62. function animation (className, sl) {
  63. var u = navigator.userAgent
  64. var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
  65. if (isiOS) {
  66. if ($('.' + className).length > 0) {
  67. $('.' + className).animate({'transform': 'scale(' + sl + ')', 'transform-origin': 'center center'},250)
  68. }
  69. } else {
  70. d3.selectAll('.' + className)
  71. .transition().duration(250)
  72. .attr('transform', 'scale(' + sl + ')')
  73. .attr('transform-origin', 'center center')
  74. }
  75. }
  76. var drags = d3.drag()
  77. .on('start', function (d) {
  78. d3.event.sourceEvent.stopPropagation()
  79. if (!d3.event.active) simulation.alphaTarget(0.3).restart()
  80. d.fx = d.x
  81. d.fy = d.y
  82. })
  83. .on('drag', function (d) {
  84. d.fx = d3.event.x
  85. d.fy = d3.event.y
  86. var tag = d3.event.sourceEvent.srcElement.tagName
  87. if (tag != 'image' && tag != 'text' && tag != 'tspan' && tag != 'g' && tag != 'svg') {
  88. simulation.alphaTarget(0);
  89. d.fx = null
  90. d.fy = null
  91. return false
  92. }
  93. })
  94. .on('end', function (d) {
  95. if (!d3.event.active) simulation.alphaTarget(0)
  96. d.fx = null
  97. d.fy = null
  98. })

设置fx和fy可以固定位置

手机网页版兼容很麻烦
监听横竖屏事件

  1. window.addEventListener(evt, function() {
  2. if (vm.isiOS && (Math.abs(window.orientation) === 90)) {
  3. // 横屏
  4. setTimeout(function () {
  5. vm.widths = $(document).width()
  6. vm.heights = $(document).height()
  7. }, 250)
  8. } else if (vm.isiOS && (Math.abs(window.orientation) === 0)) {
  9. // 竖屏
  10. setTimeout(function () {
  11. vm.widths = $(document).width()
  12. vm.heights = $(document).height()
  13. }, 250)
  14. }
  15. })

横竖屏切换时,获取的width和height还是切换前的宽高,所以加了一个定时器

时间有限我先粗略的写吧,扣扣交流1979751899

发表评论

表情:
评论列表 (有 0 条评论,549人围观)

还没有评论,来说两句吧...

相关阅读