D3.js基本图表绘图示例未显示

Question

我是Javascript的新手，想使用D3库在线可视化我的数据。

我在网上发现了很多关于从数据数组中绘制简单条形图的例子。 但是，以下示例不起作用，它只返回一个空白网页：

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

       .chart div {
       font: 10px sans-serif;
       background-color: steelblue;
       text-align: right;
       padding: 3px;
       margin: 1px;
       color: white;
     }

   </style>
  <div class="chart"></div>
  <script src="http://d3js.org/d3.v4.js"></script>
 <script> 
    var data = [4, 8, 15, 16, 23, 42];  

    var x = d3.scale.linear()
      .domain([0, d3.max(data)])
      .range([0, 420]);
    d3.select(".chart")
      .selectAll("div")
      .data(data)
      .enter().append("div")
      .style("width", function(d) { return x(d) + "px"; })
      .text(function(d) { return d; });
   </script>

这可能是源脚本（ http://d3js.org/d3.v4.js ）或浏览器的问题吗？ 任何帮助都不仅仅是值得赞赏的。

问候。

Answer 1

在加载d3版本4库时，您正在调用d3版本3方法。 简单地替换：

d3.scale.linear()

附：

d3.scaleLinear()

---

来自更改文档 ：

...如果您不关心模块化，您通常可以忽略此更改并继续使用默认捆绑包。 但是，采用ES6模块有一个不可避免的后果：D3 4.0中的每个符号现在共享一个平面命名空间而不是D3 3.x中的嵌套命名空间。 例如，d3.scale.linear现在是d3.scaleLinear ...

---

完整代码：

 <!DOCTYPE html> <meta charset="utf-8"> <style> .chart div { font: 10px sans-serif; background-color: steelblue; text-align: right; padding: 3px; margin: 1px; color: white; } </style> <div class="chart"></div> <script src="http://d3js.org/d3.v4.js"></script> <script> var data = [4, 8, 15, 16, 23, 42]; var x = d3.scaleLinear() .domain([0, d3.max(data)]) .range([0, 420]); d3.select(".chart") .selectAll("div") .data(data) .enter().append("div") .style("width", function(d) { return x(d) + "px"; }) .text(function(d) { return d; }); </script>