D3.js 入门1：矩形、比例尺、坐标轴

1 画矩形

x,y为左上角，利用width 和 height控制大小。

svg.selectAll("rect")  //选择svg内所有的矩形
    .data(dataset)  //绑定数组
    .enter()       //指定选择集的enter部分
    .append("rect")//添加足够数量的矩形元素
    .attr("x", 20)
    .attr("y", (d, i) => { 
        return i * rectHeight;
    })
    // .attr("width", (d) => { 
    //     return d;
    // })
    .attr("width", (d) => { 
        return d / dataset.reduce((a, b) => {
            return b > a ? b : a;
        }) * 100;
    }) // 瞎搞 后面可能好像可以用比例尺解决
    .attr("height", rectHeight - 2)
    .attr("fill", "steelBlue"); // 填充为蓝色 

2 比例尺

// 线性比例尺
var min = d3.min(dataset); // d3 用来求数组最大最小值的函数
var max = d3.max(dataset);

var linear = d3.scale.linear()
        .domain([min, max])
        .range([0, 300]);

linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

// d3.scale.linear() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域。


// 序数比例尺
var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];

var ordinal = d3.scale.ordinal()
        .domain(index)
        .range(color);

ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black

反映到图形中：

var width = 300;  //画布的宽度
var height = 300;   //画布的高度

var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", width)       //设定宽度
    .attr("height", height);    //设定高度

var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）
var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)

var min = d3.min(dataset); // d3 用来求数组最大最小值的函数
var max = d3.max(dataset);

var linear = d3.scale.linear()
        .domain([min, max])
        .range([0, 300]);

svg.selectAll("rect")  //选择svg内所有的矩形
    .data(dataset)  //绑定数组
    .enter()       //指定选择集的enter部分
    .append("rect")//添加足够数量的矩形元素
    .attr("x", 20)
    .attr("y", (d, i) => { 
        return i * rectHeight;
    })
    .attr("width", (d) => { 
        return linear(d);
    }) // 瞎搞 后面可能好像用比例尺解决
    .attr("height", rectHeight - 2)
    .attr("fill", "steelBlue"); // 填充为蓝色 

3 坐标轴

var axis = d3.svg.axis()
            .scale(linear)      //指定比例尺
            .orient("bottom")   //指定刻度的方向
            .ticks(4);          //指定刻度的数量

svg.append("g")
    .attr("class","axis")
    .attr("transform","translate(20,130)")
    .call(axis);

一个样式：

.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
p {
    background-color: red;
}