我是Java语言的新手,并且想使用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)还是浏览器有问题?
任何帮助将不胜感激。

问候。

最佳答案

您在加载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>

09-17 11:37
查看更多