chapter-7 加载数据

data.json

{
  "data" : [
    {"name":"Alice","age":12},
    {"name":"Mary","age":30},
    {"name":"Maria","age":50},
    {"name":"Francis","age":20}
  ]
}

d3.json('data.json',function(data){
    var data = data.data;

     var canvas = d3.select('body')
         .append('svg')
         .attr('width',500)
         .attr('height',500)

    var rect = canvas.append('g')
        .selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr('width',function(d){ return d.age*10})
        .attr('height',30)
        .attr('y',function(d,i){
            return i*50
        })
        .attr('fill','blue');

    var text = canvas.append('g')
        .selectAll('text')
        .data(data)
        .enter()
        .append('text')
        .attr('y',function(d,i){
            return i*50+20
        })
        .attr('fill','#fff')
        .text(function(d){return d.name})
})