Question

我是D3新手，从小型JSON数据集开始使用小型堆积条形图。元素显示在DOM中，但我无法让它们在页面上实际呈现。这是一个代码笔链接：

这是相关的html和JS为了后人的缘故： HTML：

<div class="container-dashboard">
  <div class="report-card">
    <div class="card-content" id="report-issues">

    </div>
  </div>
</div>

JS：

//data
var width = 400;
var height = 250;
var data = 
[
  {
    type: 'Functional',
    total: 8,
    stacks: [1, 1, 2, 4]
  }, {
    type: 'Technical',
    total: 3,
    stacks: [1, 1, 1, 0]
  }, {
    type: 'GUI',
    total: 10,
    stacks: [3, 0, 0, 7]
  }, {
    type: 'Crash',
    total: 8,
    stacks: [8, 0, 0, 0]
  }
];

//add the svg
var svg = d3.select("#report-issues").append("svg")
  .attr({
    class: 'chart',
    width: '400',
    height: '250'
  });

/*
var xScale = d3.scale.linear()
    .domain([0, d3.max(data.stacks)])
    .range([0, width]);
*/

var g = svg.selectAll('g').data(data);

g.enter().append('g').attr({
  w: function (d, i) { return width },
  h: function (d, i) { return 30 },
  'transform': function (d, i) {
    return 'translate(0,' + i * 30 + ')';
  },
  'fill': "black"
})

var rect = g.selectAll('rect').data(function(d) {
  return d.stacks;
});

rect.enter().append('rect').attr({
  w: function (d, i) { return d * 3 },
  h: function (d, i) { return 10 },
  x: function (d, i) { return 0 },
  y: function (d, i) { return 0 },
  'fill': "red"
})

任何帮助都会受到赞赏，甚至可以链接到使用类似数据的堆积条形图上的精彩教程（我发现大多数都是矩阵）。

Answer 1

SVG元素大小的正确属性为height和width，而不是h和w。您的代码可能存在其他问题，但该更改至少会使条形图可见。

g.enter().append('g').attr({
  width: function (d, i) { return width },
  height: function (d, i) { return 30 },

//...

rect.enter().append('rect').attr({
  width: function (d, i) { return d * 3 },
  height: function (d, i) { return 10 },

D3堆积条形图g和rect没有显示

1 个答案: