最近研究了一下d3的画图，觉得挺有的趣的想分享一下自己的想法。自己是一个小白，希望大佬们多给点评。 step1： 先要获取svg画布，可以在body里面自己定义一个svg也可以在d3里面通过append()添加。具体写法是： dataset = [20,40,70,190,80,270];//定义一个数组 var width= 400 ； var height = 400； var svg = d3.select("body") .append("svg") .attr("width",width) //设置svg宽度属性 .attr("height",height) //设置svg高度属性 接下来需要定义每个矩形的位置。 var pdding = {top:20,height:20,left:20,right:20};//图形与画布的距离 var rectWdith = 30; //矩形所占的宽度(不包含空白) var rectStep = 35; //矩形所占的宽度(包括空白) var rect = svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("fill",:red) .attr("x",function(d,i){ //设置x坐标 return padding.left + i* rectstep; }) .attr("y",function(){ //设置y坐标 return height - padding.bottom -d; }) .attr("width",rectWidth) //设置宽度 .attr("height"function(d){ //设置高度 return d; });
data(dataset).enter().append("rect")的大概意思是，数据与矩形个数相比较，找到矩形不足的数量通过append()补充。
通过一张图来解释代码：
