D3.js svg条形图无法在plnkr上呈现_D3.js

D3.js svg条形图无法在plnkr上呈现

d3.js

D3.js svg条形图无法在plnkr上呈现,d3.js,D3.js,不确定这是plnkr问题还是我的代码问题。。尽管控制台没有显示任何错误我正在编写一个小svg脚本，它不会呈现 var w = 300; var h = 100; var padding = 2; var dataset = [5, 10, 14, 20, 25]; var svg = d3.select("body").append("svg").attr("width", w).attr("height", h); svg.selectAll('rect') .data(dataset

不确定这是plnkr问题还是我的代码问题。。尽管控制台没有显示任何错误

我正在编写一个小svg脚本，它不会呈现

var w = 300;
var h = 100;
var padding = 2;

var dataset = [5, 10, 14, 20, 25];
var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);


svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('x', function(d, i) {
  return i * (w/dataset.length);
})
.attr('y', function(d) {
  return h - (d);
})
  .attr("width", w/ dataset.length - padding)
  .attr("height", function(d) {
    return d;
  });

请点击此处：

在文档中运行它。准备好或等待窗口加载

问题是在加载窗口之前运行脚本，您需要将所有内容都放在一个窗口中。load或doc readyohh..我有多少次没有犯这个错误。。我通常很快就会康复。。但是因为d3对我来说是新的。。我没想到还有别的事。。我认为你的答案是正确的。。但这是一个评论。。

<!DOCTYPE html>
<html>
<head>
    <script data-require="d3@*" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
  </body>

</html>

$(document).ready(function(){
  var w = 300;
var h = 100;
var padding = 2;

var dataset = [5, 10, 14, 20, 25];
var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);

console.log('running the plnkr');
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('x', function(d, i) {
  return i * (w/dataset.length);
})
.attr('y', function(d) {
  return h - (d * 4);
})
  .attr("width", w/ dataset.length - padding)
  .attr("height", function(d) {
    return d * 4;
  });

});