zwblcz 2019-06-26
.csv文件指的是以,分隔的文件。 c表示comma 逗号的英文名。
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); // })