什么是在d3.js中排列多个元素以使其保持在一起的正确方法？

Question

我想在我的博客上插入d3.js脚本进行交互式演示。我有一个适用于WordPress的“插入脚本”插件，它似乎运行良好。我想拥有它，所以我只将脚本放在段落之间的某个位置，并且文本和任何东西都没有重叠，所以就像：

  

等等等等第1段等等

     

[[我很酷的可视化]]

     

第2段等等

但是，这是我的困惑。我的可视化包含两个部分，例如用户可以单击的图表，然后是与第一部分中发生的情况相对应的图表。现在，我只为脚本中的每个脚本制作了一个单独的SVG，当我仅测试脚本时，它们会并排显示。

但是，当我将它们放在博客文章中时，如何保证它们并排出现或排列正确？例如，假设我想要这样的布局：

（没有可见的外部框。）

我可以考虑几种方法，但是我不确定哪种方法最聪明：

1. 仅使用一个svg，并在内部将其切成小块，因此我将图表范围映射到特定的像素位置

2. 有<div> s的东西？

3. 使用svg <g>元素对事物进行分组并进行转换吗？

但是我不确定哪种是“洁净”方式。我希望它在计算机屏幕上看起来大部分都很好（而不是与手机有关）。做这样的事情的正确方法是什么？