从 HTML 构建的 XHTML 文件未显示 D3.js 图形，即使 HTML 确实显示了它-解网

问：

我正在尝试从以前的 HTML 文件创建一个带有 D3 图形的 XHTML 文件。我的 HTML 看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .bar {
        fill: red;
      }
    </style>
    <script src="d3.v4.js"></script>
  </head>
  <body>
    <svg width="500" height="400"></svg>
    <script src="bar_chart.js"></script>
  </body>
</html>

这表明了这一点：

但是，当我将其转换为XHTML时：

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>
      .bar {
        fill: red;
      }
    </style>
    <script src="../script/d3.v4.js"></script>
  </head>
  <body>
    <svg width="500" height="400"></svg>
    <script src="../script/bar_chart.js"></script>
  </body>
</html>

它显示了这一点：

这是生成条形图的 JS 脚本。

var dataset1 = [33, 57, 84, 21, 60];

var svg = d3.select("svg"),
  margin = 200,
  width = svg.attr("width") - margin,
  height = svg.attr("height") - margin;

var xScale = d3.scaleBand().range([0, width]).padding(0.5),
  yScale = d3.scaleLinear().range([height, 0]);

var g = svg.append("g").attr("transform", "translate(" + 100 + "," + 100 + ")");

xScale.domain(dataset1);
yScale.domain([0, 100]);

g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(
    d3.axisBottom(xScale).tickFormat(function (d) {
      return "sale: " + d;
    })
  );

g.append("g").call(
  d3
    .axisLeft(yScale)
    .tickFormat(function (d) {
      return "$" + d;
    })
    .ticks(4)
);

g.selectAll(".bar")
  .data(dataset1)
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("x", function (d) {
    return xScale(d);
  })
  .attr("y", function (d) {
    return yScale(d);
  })
  .attr("width", xScale.bandwidth())
  .attr("height", function (d) {
    return height - yScale(d);
  });

你们我错过了什么吗？我以为将 HTML 转换为 XHTML 只是遵循一些更多的准则并在顶部指定它是一个 XHTML。D3 不兼容吗？

感谢您的支持。

JavaScript HTML D3.js XHTML

从 HTML 构建的 XHTML 文件未显示 D3.js 图形，即使 HTML 确实显示了它

XHTML file build from HTML is not showing D3.js graph, even though HTML did show it

评论