Question

因此，我试图让D3在Webview上运行，为此，我试图遵循D3教程，但是，在第一个示例中，我已经陷入困境。我的代码存在错误：

ReferenceError: document is not defined

我知道这是因为vscode没有文档的概念。问题是，我正在关注的教程似乎隐式引用了该文档。

我的代码：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vscode = require("vscode");
const d3 = require("d3");
function activate(context) {
    // Create and show a new webview
    const panel = vscode.window.createWebviewPanel('catCoding', // Identifies the type of the webview. Used internally
    'Cat Coding', // Title of the panel displayed to the user
    vscode.ViewColumn.One, // Editor column to show the new webview panel in.
    {} // Webview options. More on these later.
    );
    panel.webview.html = getWebviewContent();
    context.subscriptions.push(vscode.commands.registerCommand('catCoding.start', () => {
        try {
            let data = [30, 86, 168, 281, 303, 365];
            d3.select("chart")
                .selectAll("div")
                .data(data)
                .enter()
                .append("div")
                .style("width", function (d) { return d + "px"; })
                .text(function (d) { return d; });
        }
        catch (e) {
            console.log(e);
        }
    }));
}
exports.activate = activate;
function getWebviewContent() {
    return `<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Cat Coding</title>
  </head>
  <body>
      <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" />
      <h1 id="lines-of-code-counter">0</h1>

      <script>
          const counter = document.getElementById('lines-of-code-counter');

          let count = 0;
          setInterval(() => {
              counter.textContent = count++;
          }, 100);
      </script>
      <div class="chart"></div>
  </body>
  </html>`;
}
// this method is called when your extension is deactivated
function deactivate() { }
exports.deactivate = deactivate;

我知道这一点；可以在vscode中使用D3，因为我只是没有多个扩展而已；对它们进行反向工程没有成功。

如何使D3在VSCODE Webview上工作？

0 个答案: