javascript - 在 django 中使用这个 d3 仪表？

Question

我从来没有在 django 中使用过 javascript 或 d3，谁能告诉我如何在我的 django html 文件中包含这个量表？我已经 npm 安装了 d3-simple-gauge，但我不确定如何实际使用它。

https://www.npmjs.com/package/d3-simple-gauge

我目前的理解是:我必须放置一个包含链接的脚本标签，尽管我不确定为什么。

我现在不知道:我是否将 d3-simple-gauge 文档中的 usage 部分全部包含在脚本标记之间？

Answer 1

如果您已经包含了所需的 d3 includes(确保您为此代码使用了正确的版本——版本 5)，那么您可以将实际的代码示例放在标记之间。示例:

<script>
const svg = d3.select('body')
  .append('svg')
  .attr('width', 400)
  .attr('height', 250);

const simpleGauge = new window.d3SimpleGauge.SimpleGauge({
  el: svg.append('g'),        // The element that hosts the gauge
  height: 200,                // The height of the gauge   
  interval: [0, 200],         // The interval (min and max values) of the gauge (optional)
  sectionsCount: 2,           // The number of sections in the gauge
  width: 400                  // The width of the gauge
});

setTimeout(() => {
  simpleGauge.percent = 0.7;  // The new percent of the needle to set (70%)

  setTimeout(() => {
    simpleGauge.value = 42;  // The new value of the needle to set inside the interval (21%)
  }, 1500);
}, 1500);
</script>

请记住，此项目需要使用 promises 的 d3.js v5。 Promise 简化了异步代码的结构，尤其是在支持 async 和 await 的现代浏览器中。

示例代码将 svg 附加到 body，但是您可能希望将它附加到 div，以便您可以在页面上正确定位它。

如果您对使用还有其他疑问，请随时发表评论。