将 D3 Graph 插入 CMS 中的 div答案

【问题标题】：Insert D3 Graph into a div in CMS将 D3 Graph 插入 CMS 中的 div
【发布时间】：2016-11-09 13:09:10
【问题描述】：

我正在使用 Bludit CMS 构建一个简单的网站。我能处理的唯一任务是将 D3 图表添加到站点中。我的图表和代码看起来很像这样：http://bl.ocks.org/mbostock/1093130

图表显示在我插入图表的脚本标签的位置。问题是，我无法在 Bludit CMS 中添加脚本标签，只能添加 HTML。现在，我考虑在我的 CMS 编辑器中添加一个带有 id 的空 div 标签，例如

<div id="myGraph">
</div>

并以编程方式将图形添加到此 div。我怎样才能做到这一点？进一步说明：我想尝试只使用 Javascript 而不使用 jQuery。我不想在我的页面中包含 jQuery，只是为了向我的网站添加图表。

【问题讨论】：

不清楚你的问题是什么。不能加脚本标签吗？如果你不能，你将无法使用 D3。您如何看待“以编程方式添加图表”？
我无法将脚本添加到我的 cms 页面编辑器中。现在，我的 cms 代码编辑器中有一个 id 为“myGraph”的空 div 标签。我想在我的 javascript 代码中实现图形应该插入到这个标签中。我该怎么做？

标签： javascript html d3.js content-management-system

【解决方案1】：

如果您无法将 JavaScript 添加到页面，您将无法使用 D3。

如果您可以从外部文件加载代码，请使用：

<script src="myfile.js"></script>

如果您只能将其添加到每个页面而不是一个页面，请检查您的 id，然后执行代码。

if( d3.select("#myGraph") ) {
   var svg = d3.select("#myGraph")
         .append( "svg")
         .attr("width", 1000)
         .attr("height", 1000);

   // Do stuff with SVG.
}

【讨论】：