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中的高度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画布，但我不能得到条形图高度的矩形，任何想法？

由于

Answer 1

我改变了一些东西，使代码功能如何默认条形图。您的主要问题是使用d.data而不是d。之后，您必须设置x和y坐标以及交替颜色（或填充x），以便矩形不会相互重叠。

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";
  });

Answer 2

发送到您的函数的d变量已经是您的数据，并且为数组中的每个项目调用它：

.attr('height', function(d) {
    return d['2'];
});

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

2 个答案: