Javascript 在webbrowser中显示D3.js示例（noob问题）_Javascript

Javascript 在webbrowser中显示D3.js示例（noob问题）

javascript

Javascript 在webbrowser中显示D3.js示例（noob问题）,javascript,Javascript,如果我想显示地图，您可以在这里看到：例如，在chrome中，我如何获得该工作？我尝试将地图下方的源代码复制为标准html格式（在正文中），但它仅以chrome显示源代码，或者根本不显示源代码我为这样一个问题道歉，但如果你能帮助我，我将不胜感激！提前感谢首先，您需要导入该页面底部的模块/文件不要忘记此存储库中的JSON数据：要做到这一点，我建议你建立与npm的网页，也许包裹或网页包。为此，您可以在新目录中创建文件package.json。确保您的计算机上安装了nodejs和npm，

如果我想显示地图，您可以在这里看到：例如，在chrome中，我如何获得该工作？我尝试将地图下方的源代码复制为标准html格式（在正文中），但它仅以chrome显示源代码，或者根本不显示源代码

我为这样一个问题道歉，但如果你能帮助我，我将不胜感激！提前感谢

首先，您需要导入该页面底部的模块/文件

不要忘记此存储库中的JSON数据：

要做到这一点，我建议你建立与npm的网页，也许包裹或网页包。为此，您可以在新目录中创建文件

package.json

。确保您的计算机上安装了nodejs和npm，然后：

从控制台类型

npm安装

然后键入

npm run start

在本地运行

或

npm运行build

打包应用程序以联机上载

/package.json

{
  "name": "vanilla",
  "version": "1.0.0",
  "description": "StackOverflow",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "d3": "6.2.0",
    "path": "0.12.7",
    "topojson-client": "3.1.0"
  },
  "devDependencies": {
    "@babel/core": "7.2.0",
    "parcel-bundler": "^1.6.1"
  },
  "keywords": [
    "javascript",
    "starter"
  ]
}

/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Stack Overflow</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <script src="src/index.js"></script>
  </body>
</html>

该函数将生成一个SVG，然后可以将其附加到所选的DOM元素中

您的最终目录列表应如下所示：

如果你发现答案是有用的，请考虑接受我的答案：）接受一个答案，点击我的答案左上方的刻度标记。很高兴它对你有用：）谢谢你的回答！

const topojson = require("topojson-client");
const d3 = require("d3");
const path = d3.geoPath();

const getMapData = async () => {
  const response = await fetch(
    "https://cdn.jsdelivr.net/npm/us-atlas@3/states-albers-10m.json"
  ).then((response) => response.json());
  return response;
};


const buildAndDisplayChart = async (domElement) => {
  const width = 975;
  const height = 610;
  const us = await getMapData()
  const zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed);

  const svg = d3
    .create("svg")
    .attr("viewBox", [0, 0, width, height])
    .on("click", reset);

  const g = svg.append("g");

  const states = g
    .append("g")
    .attr("fill", "#444")
    .attr("cursor", "pointer")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.states).features)
    .join("path")
    .on("click", clicked)
    .attr("d", path);

  states.append("title").text((d) => d.properties.name);

  g.append("path")
    .attr("fill", "none")
    .attr("stroke", "white")
    .attr("stroke-linejoin", "round")
    .attr("d", path(topojson.mesh(us, us.objects.states, (a, b) => a !== b)));

  svg.call(zoom);

  function reset() {
    states.transition().style("fill", null);
    svg
      .transition()
      .duration(750)
      .call(
        zoom.transform,
        d3.zoomIdentity,
        d3.zoomTransform(svg.node()).invert([width / 2, height / 2])
      );
  }

  function clicked(event, d) {
    const [[x0, y0], [x1, y1]] = path.bounds(d);
    event.stopPropagation();
    states.transition().style("fill", null);
    d3.select(this).transition().style("fill", "red");
    svg
      .transition()
      .duration(750)
      .call(
        zoom.transform,
        d3.zoomIdentity
          .translate(width / 2, height / 2)
          .scale(
            Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height))
          )
          .translate(-(x0 + x1) / 2, -(y0 + y1) / 2),
        d3.pointer(event, svg.node())
      );
  }

  function zoomed(event) {
    const { transform } = event;
    g.attr("transform", transform);
    g.attr("stroke-width", 1 / transform.k);
  }

  document.querySelector(domElement).appendChild(svg.node())
};

buildAndDisplayChart("body")