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

Question

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

编辑:我实现了@timur 建议的示例，但情节仍然没有显示。

Answer 1

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

考虑 this example 的略微简化版本:

/static/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);

content/posts/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 我很确定代码本身可以正常工作:请参阅 this jsfiddle . Hugo 有不同的文件布局，但我想在这里说明的是，这应该是确保加载两个 javascript 文件的全部问题。

UPD2 起始版本 0.60.0 Hugo will not by default allow不安全的 html 内容(例如标签)。要使其正常工作，您需要启用它:

markup:
  goldmark:
    renderer:
      unsafe: true