javascript - 如何使用 D3.js 访问 JSON 数据？

Question

我有一个外部 JSON 文件，结构如下:

{
 data: [
       {
        0: 'cat',
        1: 232,
        2: 45
       },
       {
        0: 'dog',
        1: 21,
        2: 9
       },
       {
        0: 'lion',
        1: 32,
        2: 5
       },
       {
        0: 'elephant',
        1: 9,
        2: 4
       },
       ]
}

使用 d3.js 我想使用键 2 访问条形图中高度的数据，因此我进行了设置:

d3.select('#chart').append('svg')
    .selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('width', barWidth)
    .attr('height', function(d) {
        return d.data['2'];
    });

我可以看到 SVG Canvas ，但无法获取条形图高度的矩形，有人有什么想法吗？

谢谢

Answer 1

我更改了一些内容，使代码能够像默认条形图一样发挥作用。您的主要问题是使用 d.data 而不是 d。之后，您必须设置 x 和 y 坐标以及交替颜色(或使用 x 进行填充)，以便矩形不会' t 彼此重叠。

var width = 30;
var padding = 5;
var chartheight = 100;
d3.select('#chart').append('svg')
  .selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('width', width)
  .attr('height', function(d) {
    return d[2];
  })
  .attr('x', function(d, i) {
    return i*(width + padding);
  })
  .attr('y', function(d, i) {
    return chartheight - d[2];
  });

d3.selectAll('rect')
  .style('fill', function(d, i) {
    return i % 2 == 0 ? "#0f0" : "#00f";
  });