Html结构
<body> <div id="container"> </div> </body>CSS样式
#container{ background:#ddd; width:500px; height:250px; } path{ fill:none; stroke:#4682B4; stroke-width:2; } .domain,.tick{ stroke:gray; /*可以通过审查元素查看相关的g标签，每个g标签都加了这两个类，分别对应每个单位坐标，所以定义这两个类的样式就可以设置坐标可视*/ stroke-width:1; }javascript脚本
var width=500; var height=300; //定义尺寸 var g_margin={top:30,right:100,bottom:80,left:100}; var g_width=width-g_margin.right-g_margin.left; var g_height=height-g_margin.top-g_margin.bottom; //确定绘制曲线位置 var data=[100,50,30,10,50,60,70,50,100]; //定义坐标数据 var svg=d3.select('#container').append('svg').attr({width:width,height:height}); var g=d3.select('svg').append('g').attr('transform','translate('+g_margin.left+','+g_margin.top+')'); //相对于svg块偏移 var scale_x=d3.scale.linear().domain([0,data.length-1]).range([0,g_width]); var scale_y=d3.scale.linear().domain([0,d3.max(data)]).range([g_height,0]); //定义图像相对于g比例缩放 var line_generator=d3.svg.line().x(function(d,i){return scale_x(i);}).y(function(d){return scale_y(d);}) .interpolate('cardinal'); //拟合方式，使得折线光滑 var path=d3.select('g').append('path').attr('d',line_generator(data)); var x_axis=d3.svg.axis().scale(scale_x);//绘制x轴 var y_axis=d3.svg.axis().scale(scale_y).orient('left');//绘制y轴 g.append('g').call(x_axis).attr('transform','translate('+0+','+g_height+')'); g.append('g').call(y_axis) .append('text') //绘制文本 .text('Price($)') .attr({ 'transform':'rotate(-90)','text-anchor': 'end', 'dy': '-2em' ,'dx':'1em','font-size':'16px','font-style':'微软雅黑','font-weight':'700'});最终的结果:
width="100%" height="300" src="//jsfiddle.net/simonchen/8gaxtgdb/embedded/" allowfullscreen="allowfullscreen">d3的使用类似于jquery，支持链式操作。本例通过一个svg容器来承载整个图像。 首先生成一个svg元素，可以使用select方法，来获取父元素容器，这里是container，类似于getElementById，不过它的参数还可以是选择器，不一定是节点。另外还有一个比较相似的方法selectAll，它选择的是全部符合条件的对象。
attr方法用来给对象设置属性，里面的参数形式可以是json格式的，当然你也可以针对某个对象后面接上多个attr方法。
svg下对应有多个g容器(每个数值值对应一个，图像也是一个g容器)
line_generator函数用于生成数据，line()方法需要x和y方向的数据。 传入数据和数据下标给x函数，并return下标；传入数据给y函数并return。 注意这里return的要是比例值
应该生成的html结构：
<svg> <g transform="translate(...)"> <path d="M0,0Q30,81.7,37.5,95C48.75,114.95,63.75,121.6,75,133S101.25,176.7,112.5,171S138.75,109.25,150,95S176.25,81.7,187.5,76S213.75,54.15,225,57S251.25,103.55,262.5,95Q270,89.3,300,0"></path> </svg>定义缩放scale_x和scale_y：线性缩放scale.linear() domain：输入范围， -对于scale_x：实际数据数量 -对于scale_y：实际数据的最大值 range：输出范围 -对于scale_x：g容器宽度 -对于scale_y：g容器高度
慕课网课程《使用D3绘制图表》笔记
