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

效果：