2

我正在使用 D3 图表。我正在尝试将代码放在https://observablehq.com/@d3/bar-chart。我把它放在一个包含下面代码的 HTML 文件中。但是当我用 Chrome 打开它时，控制台告诉我在第 13 行出现错误“Uncaught SyntaxError: Unexpected identifier”，即：

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

我无法在这条线上发现错误。

HTML 代码：

<!DOCTYPE html>
<meta charset="utf-8">
<html>

<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>
<script>
chart = {
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);


  svg.append("g")
      .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")
      .call(xAxis);

  svg.append("g")
      .call(yAxis);

  return svg.node();
}

data = Array(26) [
  {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},
  {name: "V", value: 0.00978},
  {name: "K", value: 0.00772},
  {name: "J", value: 0.00153},
  {name: "X", value: 0.0015},
  {name: "Q", value: 0.00095},
  {name: "Z", value: 0.00074}
]

data = (await d3.csv("https://gist.githubusercontent.com/mbostock/81aa27912ad9b1ed577016797a780b2c/raw/3a807eb0cbb0f5904053ac2f9edf765e2f87a2f5/alphabet.csv", ({letter, frequency}) => ({name: letter, value: +frequency}))).sort((a, b) => b.value - a.value)

x = ƒ(i)

x = d3.scaleBand()
    .domain(data.map(d => d.name))
    .range([margin.left, width - margin.right])
    .padding(0.1)

y = ƒ(n)

y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)]).nice()
    .range([height - margin.bottom, margin.top])

xAxis = ƒ(g)

xAxis = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).tickSizeOuter(0))

yAxis = ƒ(g)

yAxis = g => g
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y))
    .call(g => g.select(".domain").remove())

height = 500

height = 500

margin = Object {top: 20, right: 0, bottom: 30, left: 40}

margin = ({top: 20, right: 0, bottom: 30, left: 40})

d3 = Object {event: null, format: ƒ(t), formatPrefix: ƒ(t, n), timeFormat: ƒ(t), timeParse: ƒ(t), utcFormat: ƒ(t), utcParse: ƒ(t), FormatSpecifier: ƒ(t), active: ƒ(t, n), arc: ƒ(), area: ƒ(), areaRadial: ƒ(), ascending: ƒ(t, n), autoType: ƒ(t), axisBottom: ƒ(t), axisLeft: ƒ(t), axisRight: ƒ(t), axisTop: ƒ(t), bisect: ƒ(n, e, r, i), bisectLeft: ƒ(n, e, r, i), …}

d3 = require("d3@5")
</script>
</body>
</html>

我不确定我从 D3 构建代码的准确性如何。我在教程的某个地方遗漏了什么吗？而且我不明白为什么第 13 行出现错误。非常感谢您的帮助。

4

0 回答 0