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()

来自changes docs：

......如果你不关心模块性，你可以忽略这一点更改并继续使用默认捆绑包。但是，有一个采用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>

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

1 个答案: