D3——绘制SVG图形-直方图

1、创建SVG元素

var svg = d3.select("body").append("svg");

2、为SVG元素设置属性

svg.attr("width", )
     .attr("height", );

或：

//Width and height
var w = ;
var h = ;
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)   // <-- Here
            .attr("height", h); // <-- and here!

或：

.attr({
       width: w,
       height: h
});

画圆实践

//Width and height
var w = ;
var h = ;

//Data
var dataset = [ , , , ,  ];

//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

var circles = svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle");

circles.attr("cx", function(d, i) {
           return (i * ) + ;
        })
    .attr("cy", h/)
    .attr("r", function(d) {
        return d;
         })
    .attr("fill", "yellow")
    .attr("stroke", "orange")
    .attr("stroke-width", function(d) {
        return d/;
    });

Bar Chart

根据div画chart

var dataset = [ , , , , , , , , , ,
                , , , , , , , , ,  ];

d3.select("body").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar")
    .style("height", function(d) {
        var barHeight = d * ;
        return barHeight + "px";
    });

根据Rect画Chart

//Width and height
var w = ;
var h = ;
var barPadding = ;  // <-- New!

var dataset = [ , , , , , , , , , ,, , , , , , , , ,  ];

//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
        .attr("x", function(d, i) {
               return i * (w / dataset.length);
        })
        .attr("y", function(d) {
             return h - (d*);  //Height minus data value
         })
        .attr("width", w / dataset.length - barPadding)
        .attr("height", function(d) {
            return d*;
         })
         .attr("fill", "teal");

.attr("fill", function(d) {
    return "rgb(0, 0, " + (d * ) + ")";
});

添加Lable:

svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")
   .text(function(d) {
        return d;
   })
   .attr("x", function(d, i) {
        return i * (w / dataset.length);
   })
   .attr("y", function(d) {
        return h - (d * );
   });

改变Label显示位置

.attr("x", function(d, i) {
        return i * (w / dataset.length) + ;  // +5
})
.attr("y", function(d) {
        return h - (d * ) + ;              // +15
});

设置属性

.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");

利用上面的方式计算label的位置，有时并不能很好的适应对应的bar，例如第一个label 5的位置，可以使用text-anchor属性居中

.attr("x", function(d, i) {
        return i * (w / dataset.length) + (w / dataset.length - barPadding) / ;      //x位置为每个bar的中间
})
.attr("y", function(d) {
        return h - (d * ) + ;  //15 is now 14
})
.attr("text-anchor", "middle")