Question

我正在尝试使用以下代码创建一个简单的条形图。 svg元素似乎存在一些问题，原因是条形图未显示在浏览器窗口中。我得到的唯一输出是“使用D3.js的条形图”。我正在使用MacOS + Chrome。

我也不确定是否需要"<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.10/polyfills.js"></script>"

以下文件分别是index.js和index.html。

var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];

var svgWidth = 500,
  svgHeight = 300,
  barPadding = 5; //ht and wt
var barWidth = (svg / dataset.length); //each bar wt

var svg = d3.select('svg') //give attr of wt and ht
  .attr("width", svgWidth)
  .attr("height", svgHeight);

var barChart = svg.selectAll("rect") //create bar chart with rect
  .data(dataset) //provide dataset
  .enter() //takes data from waiting state perform operation
  .append("rect")
  .attr("y", function(d) {
    return svgHeight - d
  })
  .attr("height", function(d) {
    return d;
  })
  .attr("width", barWidth - barPadding)
  .attr("transform", function(d, i) {
      var translate = [barWidth * i, 0]; //[x axis, y axis]
      return "translate(" + translate + ")"; //translate one bar after another

<html>

<head>
  <link rel="stylesheet" href="index.css">
  <title>Basics of D3.js</title>
</head>

<body>
  <h1>Bar chart using D3.js</h1>
  <svg class="bar-chart"></svg>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.10/polyfills.js"></script>
  <script src="index.js"></script>
</body>

</html>

未选择SVG元素-未显示条形图

0 个答案: