d3.js中动态数据的请求、处理及使用

添加字母刻度值的坐标轴

前面添加的坐标轴是一种数值形式的连续缩放的坐标轴，例如0-10，这种方法是Quantitative Scales

而有些值是不连续的，每个值都是独立的，例如：坐标轴以年份分割，年份是不连续的，随意的值

这个时候咱们能够用到另一种缩放形式：Ordinal Scales

Ordinal Scales 咱们不用指定连续的输入，只须要指定一个范围便可

能够看出range内包括Step单元N个（取决于domain数组个数）、OuterPading单元两个
ordinal.rangeBands(interval[, padding[, outerPadding]])
为了区分参数和各单元。参数由首字母替代；

range与rangeBand 、padding和outerPadding的关系式：
range = N rangeBand + (N-1)padding + 2 * outerPadding;

range = N (rangeBand + padding) - padding 2 outerPadding
//outerPadding和step的关系式： outerPadding = step * o
//Padding和step的关系式： Padding = step * p
//rangeBand和step的关系式： rangeBand = step * (1 - p)
//换算得倒 range = N(step (1 -p) + step p) - step p + 2 step o
//range = N step - step p + 2 step o
//==> step = range / (n - p + 2 * o)
//而 step 究竟是什么？ 获得step 换算获得 padding 和 outerPadding而已

更多内容见：http://blog.csdn.net/lh_qppr/...

完整实现代码以下：

d3.csv("people.csv", type, function(data) {
    console.log(data);
    var width = 1000, //柱形图的宽度
        height = 500, //柱形图的高度
        margin = { left: 30, top: 30, right: 30, bottom: 30 }, //距离周边的距离,注意下面要计算坐标轴的位置
        svg_width = width + margin.left + margin.right, //将变量svg_height 改成 svg_width
        svg_height = height + margin.top + margin.bottom;

    // 定义缩放函数,y轴的缩放，y轴缩放不变，仍然是线性缩放
    var scale = d3.scale.linear()
        .domain([0, d3.max(data, function(d) {
            return d.price; //y坐标的值
        })])
        .range([height, 0]);

    //定义x轴的缩放，x轴缩放不是线性的，是随机的数值，使用Ordinal Scales方法实现。
    var scale_x = d3.scale.ordinal()
        // domain定义输入范围，rangeBands定义输出范围
        .domain(data.map(function(d) { //map能够将data数据映射成一个数组
            return d.id;
        }))
        .rangeBands([0, width], 0.1); //输出范围为：0-width，padding为：0.1。

    var svg = d3.select("#container")
        .append("svg")
        .attr("width", svg_width)
        .attr("height", svg_height);

    var chart = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var bar = chart.selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .attr("transform", function(d, i) {
            return "translate(" + scale_x(d.id) + ",0)";
        });

    bar.append("rect")
        .attr({
            "y": function(d) {
                return scale(d.price);
            },
            "width": scale_x.rangeBand(),
            "height": function(d) {
                return height - scale(d.price);
            }
        })
        .style("fill", "blue")

    bar.append("text")
        .text(function(d) {
            return d.price;
        })
        .attr({ //设置数值的显示位置
            "y": function(d) {
                return scale(d.price);
            },
            "x": scale_x.rangeBand() / 2,
            "dy": 15,
            "text-anchor": "middle" //让字显示在条的内部
        })
})

function type(d) { //定义数据转换函数，将数据d传递进来
    // 将字符串类型的值转换为 number数值类型,用  = +
    d.price = +d.price;
    d.id = +d.id;
    return d;
}

效果：