Question

不确定这是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;
  });

Plnkr： http://plnkr.co/edit/X7KomlmOVS6C0zhNL19b

Answer 1

在document.ready中运行它或等到窗口加载完毕。 http://plnkr.co/edit/TmFWndyCgLk7GYEng7XP

<!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>

和JS

$(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;
  });

});

svg条形图无法在plnkr上呈现

1 个答案: