可以使用 Hugo 提供 D3.js 可视化吗？

Question

我有一些 D3.js 可视化我想在我使用 Hugo 制作的 Github Pages 网站上提供服务。我正在努力如何在 Markdown 文件中包含可视化（html 和 js 文件）。这可能吗？如果没有，我可以在 Hugo 上使用独立的 html 文件吗？

编辑： 我实现了@timur 建议的示例，但该图仍未显示。

Answer 1

这是可行的，只要您可以包含 D3 本身的 javascript 文件和您的图表定义：

考虑这个例子的一个稍微简化的版本：

/静态/example.js

margin = ({top: 20, right: 0, bottom: 30, left: 40})

height = 500
width = 500
data = [
  {name: "E", value: 0.12702},
  {name: "T", value: 0.09056},
  {name: "A", value: 0.08167},
  {name: "O", value: 0.07507},
  {name: "I", value: 0.06966},
  {name: "N", value: 0.06749},
  {name: "S", value: 0.06327},
  {name: "H", value: 0.06094},
  {name: "R", value: 0.05987},
  {name: "D", value: 0.04253},
  {name: "L", value: 0.04025},
  {name: "C", value: 0.02782},
  {name: "U", value: 0.02758},
  {name: "M", value: 0.02406},
  {name: "W", value: 0.0236},
  {name: "F", value: 0.02288},
  {name: "G", value: 0.02015},
  {name: "Y", value: 0.01974},
  {name: "P", value: 0.01929},
  {name: "B", value: 0.01492}
]

yAxis = g => g
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y))
    .call(g => g.select(".domain").remove())

xAxis = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).tickSizeOuter(0))

y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)]).nice()
    .range([height - margin.bottom, margin.top])

x = d3.scaleBand()
    .domain(data.map(d => d.name))
    .range([margin.left, width - margin.right])
    .padding(0.1)

function zoom(svg) {
  const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]];

  svg.call(d3.zoom()
      .scaleExtent([1, 8])
      .translateExtent(extent)
      .extent(extent)
      .on("zoom", zoomed));
  function zoomed() {
    x.range([margin.left, width - margin.right].map(d => d3.event.transform.applyX(d)));
    svg.selectAll(".bars rect").attr("x", d => x(d.name)).attr("width", x.bandwidth());
    svg.selectAll(".x-axis").call(xAxis);
  }
}

const svg = d3.select(".visualisation") 
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .call(zoom);

  svg.append("g")
      .attr("class", "bars")
      .attr("fill", "steelblue")
    .selectAll("rect")
    .data(data)
    .join("rect")
      .attr("x", d => x(d.name))
      .attr("y", d => y(d.value))
      .attr("height", d => y(0) - y(d.value))
      .attr("width", x.bandwidth());

  svg.append("g")
      .attr("class", "x-axis")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y-axis")
      .call(yAxis);

内容/帖子/my-first-post.md

---
title: "D3.js bars"
date: 2020-03-24T00:00:00Z
draft: false
---

### Hello
<div class="visualisation"> </div> <!-- Hugo supports html in markdown -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.js"></script> <!-- load d3.js from CDN. you could potentially load it from /static folder as well-->
<script src = "/example.js"></script> <!-- this will pick our scipt up and render the chart -->

这种结构可能并不理想，因为您可能会将 javascript 引用粘贴到某种类型的可重用布局中，并可能对图表定义进行参数化，因此您不必为每个页面重复它。在不知道您的具体情况的情况下，提出这些建议有点困难。我只是希望它能给你一个足够好的提示，让你继续前进。

UPD我很确定代码本身正在工作：请参阅此 jsfiddle。Hugo 有不同的文件布局，但我想在这里说明的一点是，这应该是确保您的两个 javascript 文件都被加载的问题。

UPD2从 0.60.0 版本开始，默认情况下Hugo将不允许不安全的 html 内容（例如标签）。要使其工作，您需要启用它：

---
title: "D3.js bars"
date: 2020-03-24T00:00:00Z
draft: false
---

### Hello
<div class="visualisation"> </div> <!-- Hugo supports html in markdown -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.js"></script> <!-- load d3.js from CDN. you could potentially load it from /static folder as well-->
<script src = "/example.js"></script> <!-- this will pick our scipt up and render the chart -->