如何使用 D3.js 将图表添加到您的 WordPress 网站

您可能熟悉“数据可视化”这个术语，因为它作为一种实践和职业道路已经变得更加主流。 这个新兴领域正在顺利进行是有原因的——重要的是我们不断地了解我们的用户，并向他们展示数据以支持我们的主张。

当数据以干净和专业的方式呈现时，它很容易理解和解释。 在大多数情况下，您的用户都是视觉化的人，那么有什么比图表更好的方式来说明数据呢？ D3.js，也称为数据驱动文档，是向 WordPress 站点添加图表的好方法。

为什么是 D3？

这个库帮助设计师在网络上展示数据。 可能性是无穷无尽的，这使它成为一个非常受欢迎的图书馆。 从简单到复杂再到介于两者之间的任何东西，D3 都可以自定义以呈现几乎任何类型的图表。 它与标准的 Web 技术配合得很好，可以操作 DOM，超级灵活，并且可以完全按照您的喜好自定义图表。

到目前为止，您很可能已经遇到过可缩放矢量图形，通常称为 SVG。 这是 D3 库创建的格式类型。 SVG 很棒，因为它们体积小、可扩展且独立于分辨率。

需要明确的是，此解决方案不附带任何开箱即用的预构建图表 - 您必须自己想出！ 看看 D3 画廊，你会看到很多很好的例子来激发你的灵感。

作为开源解决方案，您不必担心许可和成本。 因为它是开源的，所以开发正在进行中。 为了及时了解最新版本，您可以在 Github 上 fork D3。

制作简单的 D3 图表

现在我们知道 D3 有多棒了，让我们构建一些东西。 我们将制作一个简单的圆环图，它将涵盖 D3 的基本概念。

第一步：将脚本添加到您的站点

首先，您需要将 D3 脚本添加到您的 WordPress 站点。 d3 网站提供下载，或者您可以直接链接到最新版本。 您会注意到我在本教程中使用的是缩小版。 D3 的大小自然非常小，但缩小版仍然略小，仅为 148 KB。

接下来，您将在自定义图表脚本所在的位置创建一个新的 JavaScript 文件。 为文件起一个可识别的名称，以便于查找。

在特定于图表的 JavaScript 之前调用 D3 脚本非常重要。 如果事情没有按正确的顺序调用，图表将不会呈现。 （我从个人经验中知道这一点，如果您不立即抓住它，您可能会花费大量时间尝试修复未损坏的东西。）

这些脚本应添加到您的网站结束正文标记之后。 检查页面时，确保它看起来像这样：

<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/charts/charts.js"></script>

请记住，您的文件路径可能与此不同，具体取决于您的文件结构。

第二步：添加脚本来创建图表

您根本不会接触d3.js文件，只在您的特定图表文件中工作。 在这种情况下，它被称为charts.js 。

让我们一块一块地分解。 首先，创建变量并确定函数中需要的内容。 我将这个变量命名为donut 。

var donut = (function(one) {
})();

在花括号内，您将添加您的尺寸信息。

var width = 400,

height = 400,

radius = 200

接下来，定义你的颜色。 灰色和蓝色图表怎么样？ 此处列出的第一种颜色是浅灰色，这将是默认颜色。 第二个是代表数据的蓝色。

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

您将需要一些数据来测试它，所以让我们接下来添加它。 对于本教程，数据是硬编码的，但您也可以将电子表格数据和动态数据与 D3 一起使用。

var piedata = [{

value: 50

}, {

value: 30

}, ]

现在您可以添加更多细节来帮助定义图表的呈现方式。

圆弧定义内半径。 想象图表的外半径——你会希望它相当厚，所以减去 100 就足够了。

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

这将创建 SVG 容器，而#donut是您将在页面上定位以实际呈现图表的对象。 这是您将从上述步骤开始看到您的颜色的地方。

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

完成的代码

以防万一您想将您所拥有的内容与示例进行比较，这里是完整的代码片段。

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: "One",

value: 50

}, {

label: "Two",

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

看图表

您将需要创建一个新页面或帖子，以便您可以“调用”圆环图以实际查看它。 确保您处于文本编辑模式。

 <div>

      <svg id="donut" viewBox="0 0 400 400" perserveAspectRatio="xMinYMid"></svg>

</div>

Viewbox 和纵横比尺寸图表

SVG 标签中有一些额外的东西，即viewBox和preserveAspectRatio 。 这不是由 D3 生成的，完全是可选的。 您可能有另一种首选的调整大小的方法，但这往往效果很好，并且有助于图表的响应能力。

特别是在这种情况下，由于我们想要保持完美的圆形，设置纵横比将确保 SVG 缩放以适应。 这就是viewBox发挥作用的地方。 viewBox的优势在于它定义了 SVG 内部使用的所有测量值和坐标应如何缩放以适应可用空间。 如果您还使用 400 作为测量值，这里有一个关于如何保持圆形形状的快速说明。

我们有两个相同的 400 值； 这样做的原因是图像可以正确缩放。 使用我们的viewBox="0 0 400 400" ，我们正在为图形创建一个坐标系。 它宽400个单位，高400个单位。 SVG 图形的宽度和高度确定了可见区域，设置viewBox允许您指定图形可以拉伸以适应某个容器（很可能是默认情况下的视口，这是用户可以目前见）。

还有一点，因为即使定义了viewBox ，它仍然不能完美地缩放。 它不会被扭曲，这是一件好事，但等式还有更多。 遇见僚机， preserveAspectRatio 。 除非有定义图像纵横比的viewBox ，否则它没有任何效果。 将调整比例以保持纵横比，因此您可以保持完美的圆形图表。 当包含preserveAspectRatio时，您计划当viewBox与图表所在的视口或容器的纵横比不匹配时的实例。在大多数情况下，默认情况下，图像将缩放直到它同时适合高度和宽度，但在任何额外的空间内居中。 我们已经包含preserveAspectRatio="xMidYMid" ，它告诉浏览器将图形在视口中的两个方向居中。

最重要的一点是知道图形不会被截断并且是可扩展的。 真正理解这一点的关键是尝试这些值。 这样做的一个好方法是查看值更改时会发生什么以及它与视口的关系。

浏览器支持和 d3

您可能使用的是现代浏览器，但如果您必须支持旧浏览器，则值得一提。 总体而言，浏览器支持很好，您可能不会遇到任何问题，但 D3.js 不能很好地与 IE8 等旧浏览器配合使用。

创建一个简单的图表是使用 D3.js 启动和运行的好方法。 在您设计数据并转向更多图表类型时，了解基础知识并熟悉 D3 入门图表将对您非常有帮助。 从简单到复杂，设计选择是无限的。

你的图表结果如何？ 让我们在评论中知道！

下一步是什么？

下载此电子书以获取我们最推荐给开发人员的插件列表！ 我们发现所有这些插件都易于使用，不会对您的网站造成太大影响，而且非常可靠。

准备好安装您最喜欢的新插件了吗？ 点击下方！