代码如下，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
无标题文档 .axis path, .axis line{ fill:none; stroke:black; shape-renderig:crispEdges; } .axis text{ font-family:Tahoma, Geneva, sans-serif; font-size:11px; } .MyRect{ fill:stealblue; } .MyText{ fill:white; text-anchor:middle;} var body=d3.select("body"); var width=400; var height=400; var svg=body.append("svg") .attr("width",400) .attr("height",400); //1.读取文件 //(1)d3.text() //(2)d3.json() /*d3.text("example.txt",function(error,txtdata){ if(error) console.log(error); console.log(txtdata); });*/ d3.json("example.json",function(error,jsondata){ if(error) console.log(error); console.log(jsondata); var xmax=d3.max(jsondata.data, function(d){return d.x;}); var ymax=d3.max(jsondata.data, function(d){return d.y;}); var xScale=d3.scale.linear() .domain([0,xmax]) .range([0,300]); var yScale=d3.scale.linear() .domain([0,ymax]) .range([250,0]); //添加坐标轴 var xAxis=d3.svg.axis() .scale(xScale) .orient("bottom"); var gxAxis=svg.append("g") .attr("class","axis") .attr("transform","translate(30,350)") .call(xAxis); var yAxis=d3.svg.axis() .scale(yScale) .orient("left"); var gyAxis=svg.append("g") .attr("class","axis") .attr("transform","translate(30,100)") .call(yAxis); //2.线段生成器 var line=d3.svg.line() .x(function(d){return xScale(d.x);}) .y(function(d){return yScale(d.y);}) .interpolate("basis"); //3.折线图 svg.append("path") .attr("class","MyPath") .attr("d",line(jsondata.data)) .attr("transform","translate(30,100)"); });//根据坐标系进行平移
