Можно ли обслуживать визуализации D3. js, используя Ху go? - PullRequest
Новая
       41

Можно ли обслуживать визуализации D3. js, используя Ху go?

0 голосов
/ 18 марта 2020

У меня есть несколько визуализаций D3. js, которые я хочу разместить на веб-сайте Github Pages, которые я сделал с помощью Hu go. Я пытаюсь включить визуализацию (файл html и js) в файл уценки. Это возможно? Если нет, могу ли я просто использовать автономный файл html для Hu go?

Редактировать: Я реализовал пример, предложенный @timur, но график все еще не отображается. Resulting webpage

1 Ответ

1 голос
/ 21 марта 2020

Это выполнимо, если вы можете включить javascript файлы для самого D3 и определения вашей диаграммы:

Рассмотрим слегка урезанную версию в этом примере :

/ 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 Я почти уверен, что сам код работает: смотрите этот jsfiddle . Ху go имеет разную компоновку файлов, но я хочу подчеркнуть, что все это должно быть связано с загрузкой обоих ваших javascript файлов.

UPD2 запуск версия 0.60.0 Ху go по умолчанию не разрешает небезопасный html контент (например, теги). Чтобы заставить его работать, вам нужно включить его: 

markup:
  goldmark:
    renderer:
      unsafe: true
...