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

d3中数据的使用

请求外部的文件，文件格式有：json、html、csv、txt、xml、tsv等。

.csv文件指的是以，分隔的文件。 c表示comma 逗号的英文名。

请求数据、获取数据、处理数据格式、使用数据

请求json格式数据

d3.json("./json/datatable.json", type, function(res) {
    console.log(res);
})

// d3.csv("url",type ,function(res) {
//     console.log(res);
// })

function type(d) { //定义数据转换函数，将数据d传递进来
    console.log(d);
    for (var i = 0; i < d.length; i++) {
        // 将字符串类型的值转换为 number数值类型,用  = +
        d[i].price = +d[i].price;
    }
    return d;
}

全部代码

    // d3.json("./json/datatable.json", type, function(data) {
d3.csv("people.csv", type, function(data) {
    console.log(data);
    // var data = [1, 4, 2, 5, 22, 9, 11],
    // bar_height=50, //相对于y轴就要改为 bar_width,然后通过全局查找将全部的bar_width改为bar_width
    bar_width = 50,
        bar_padding = 10,
        svg_width = (bar_width + bar_padding) * data.length, //将变量svg_height 改为 svg_width
        svg_height = 500

    // 定义缩放函数
    var scale = d3.scale.linear()
        // .domain([0, d3.max(data)])
        .domain([0, d3.max(data, function(d) {
            return d.price; //y坐标的值

        })])
        .range([svg_height, 0]);
    // .range([0, svg_width]);
    var svg = d3.select("#container")
        .append("svg")
        .attr("width", svg_width)
        .attr("height", svg_height)

    var bar = svg.selectAll("g") //旋转svg中所有的g元素
        .data(data) //使用data()方法将data[]数组和g绑定起来
        .enter()
        .append("g")
        .attr("transform", function(d, i) {
            return "translate(" + i * (bar_width + bar_padding) + ",0)";
        })
    bar.append("rect")
        .attr({
            "y": function(d) {
                return scale(d.price);
            },
            "width": bar_width,
            "height": function(d) {
                return svg_height - scale(d.price);
            }
        })
        .style("fill", "lightgreen")

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

function type(d) { //定义数据转换函数，将数据d传递进来
    // console.log(d);
    // for (var i = 0; i < d.length; i++) {
    // d[i].price = +d[i].price;
    // }
    // 将字符串类型的值转换为 number数值类型,用  = +
    d.price = +d.price;
    return d;
}
// d3.csv("url",type ,function(res) {
//     console.log(res);
// })

通过字母添加刻度值