Question

我已从此处提供的示例中复制了以下代码https://scrimba.com/casts/cast-1953

但是，没有显示图表。我也没有在控制台中出错。当我在控制台中输入d3时，会返回一个对象，因此找到了d3。

我错过了什么？

<head>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>

    <style type="text/css">
        .chart div {
          font: 10px sans-serif;
          background-color: steelblue;
          text-align: right;
          padding: 3px;
          margin: 1px;
          color: white;
        }
    </style>

    <script type="text/javascript">

    var 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; });


    </script>
</head>

<body>

    <div class="chart"></div>

</body>

Answer 1

您必须将正文放在脚本之前，如下所示：

＆＃13;

<body>

  <div class="chart"></div>

</body>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>

<style type="text/css">
  .chart div {
    font: 10px sans-serif;
    background-color: steelblue;
    text-align: right;
    padding: 3px;
    margin: 1px;
    color: white;
  }
</style>

<script type="text/javascript">
  var 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;
    });
</script>

＆＃13;

Answer 2

而是在头部使用脚本，尝试在页面底部使用或在页面准备就绪时使用。

<head>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>

<style type="text/css">
    .chart div {
      font: 10px sans-serif;
      background-color: steelblue;
      text-align: right;
      padding: 3px;
      margin: 1px;
      color: white;
    }
</style>

<div class="chart"></div>


<script type="text/javascript">


var 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; });

</script>

d3js简单的条形图没有显示

2 个答案: