将d3.js图表​​添加到Wordpress

Question

我正在寻找将d3.js图表​​添加到Wordpress的一些建议。

我的客户已委托强制模拟 - 仍在进行中。目前组织如下：

• 的index.html
• main_javascript.js
• main_css.css
• global_properties.js
• data_file.csv

我完全不知道是否可以将图表添加到她的Wordpress博客中，如果是这样的话怎么做....任何建议都会非常感激。

非常感谢。

Answer 1

供参考，here are the WordPress docs on Using JavaScript。

让他们轻松

根据过去的经验（虽然不是在WordPress中），我尝试简化客户必须采取的步骤，以使可视化工作得很好，以防万一这样做的人技术水平很低。

因此，我尽可能将您的文件合并为一个force-viz.js：

• 可以通过在JS中使用适当元素的d3.style来内联CSS规则。
• CSV可以内联为JavaScript字符串，使用d3.csvParse解析。
• global_properties.js可以放在同一个JS文件中。
如果您使用index.html构建所需的DOM树并指示客户端编写，则不需要

• d3.select(...).append(...) -

  <div id="force-viz"></div>
  

  - 他们希望图表显示，然后在您的脚本中显示d3.select。

这意味着您的客户所要做的就是：

1. 将force-viz.js放在scripts/目录中。

2. 粘贴 -

   <div id="force-viz"></div>
   <script src="scripts/force-viz.js"></script>
   

   - 在任何页面的文本中，无论他们希望图表出现在哪里。

让您轻松

如果被迫编入单个文件很烦人，我建议Browserify。它是一个可以使用require('whatever.js')处理一组JavaScript文件的工具 - 相互调用，将它们适当地组合到一个文件中。使用a plugin，它甚至可以将fs.readSync('data.csv')次调用转换为包含该文件内容的字符串，您可以将其与该CSV文件一起使用。

这样，您可以继续将该事物编程为单独的文件，然后运行browserify将它们捆绑给您的客户。

或者只是手动完成，如果这是一次性项目。你的电话。