Question

我正在学习有关使用D3.js的基本教程。以下代码显示了一个简单的条形图：

var data_set_two = [16, 32, 64, 128, 256, 524];

d3.select(".data-container.second-post")
  .selectAll("div")
  .data(data_set_two)
    .enter()
    .append("div")
    .style("width", function(d) {
      return d + "px";
    })
    .append("span")
    .text(function(d) {
      return d;
    });

但是当我添加scale变量并按照文档使用时，不再显示任何内容：

var data_set_two = [16, 32, 64, 128, 256, 524];

var scale = d3.scale.linear()
  .domain([0, 524])
  .range([0, 500])

d3.select(".data-container.second-post")
  .selectAll("div")
  .data(data_set_two)
    .enter()
    .append("div")
    .style("width", function(d) {
      return scale(d) + "px";
    })
    .append("span")
    .text(function(d) {
      return d;
    });

我知道是比例尺变量破坏了代码，因为当我注释掉它时，图表又回来了。

这是我的脚本标签：

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="{{ site.baseurl }}/assets/js/data.js"></script>

D3线性刻度停止显示任何数据

0 个答案: