简体   繁体   English

适用于移动设备的D3.js气泡图

[英]Mobile-friendly D3.js bubble chart

I am building a force bubble chart with D3.js. 我正在使用D3.js构建强制气泡图。 I am almost done, the only thing is that when I am simulating on a mobile, the positions of the bubbles are not adjusting to the size of the screen (I don't see any bubble). 我快完成了,唯一的事情是,当我在移动设备上进行仿真时,气泡的位置没有适应屏幕的大小(我看不到任何气泡)。 When I look at examples, it seems to display correctly on mobiles. 当我查看示例时,它似乎可以在手机上正确显示。

What part of the code in D3.js is changing the mobile display ? D3.js中的代码的哪一部分改变了移动显示?

You can visualize my project from this link (some things don't work like the background picture but the bubbles are there. We see them in tablet and desktop mode but not on cellphone mode). 您可以通过此链接将我的项目可视化(某些事情不像背景图片那样起作用,但是气泡仍然存在。我们在平板电脑和台式机模式下看到了它们,而在手机模式下看不到它们)。 You can access the github page by following the same path : https://rawgit.com/aubertsigouin/canAi/master/index.html 您可以通过以下相同路径访问github页面: https : //rawgit.com/aubertsigouin/canAi/master/index.html

Is your svg bigger than the screen? 您的svg是否大于屏幕?

You can set the size of the svg based on the window size. 您可以根据窗口大小设置svg的大小。

let svg = d3.select('#teck-stack-svg');
svg.attr('width', window.innerWidth);
svg.attr('height', window.innerHeight);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM