//生成x坐标轴 var xAxis = d3.svg.axis() //新建一个默认的坐标轴 .scale(x) //设置比例尺 .ticks(d3.time.day, 1) //指定刻度生成的方式 .tickFormat(function(d){ //自定义刻度文字格式 var month = d.getMonth() + 1; return month+'月'+ d.getDate() +'日'; }) .tickPadding([15]) //坐标轴线与文字之间的距离 .tickSize(-height) .orient("bottom"); //位置
ticks的参数类型取决于对应的比例尺的类型，这里传的参数是时间间隔，也就是说刻度与刻度之间是相隔一天的。
tickFormat则让我们可以自定义刻度的文字格式。
值得一说的是，如果数据中对应X轴的数据是字符串，比如‘2017-08-12'。那绑定到页面上的数据是需要被处理的。D3提供解析日期的接口以及日期格式化的接口。
format.parse(string)：把一个字符串string解析为一个日期。 d3.time.format(specifier)：根据给定的specifier创建一个当地时间格式化。
比如：
var parseDate = d3.time.format("%Y-%m-%d").parse; //时间解析器 var date = parseDate('2017-08-12'); //将字符串解析成日期
最后，在svg元素中添加坐标轴：
//添加X轴元素 svg.append("g") .attr("class", "axis x") .attr("transform", "translate(0," + height + ")") .call(xAxis);
selection.call(function[, arguments…])方法调用指定的方法一次，并把selection跟随参数一起传递到方法中。
柱状图中的长方形
具体步骤：将数据跟页面元素绑定，并创建所需要的页面元素，具体设置每个页面元素的样式位置，以及事件监听等。
//添加条形的元素 var bars = svg.selectAll(".barRect") .data(ddata) //绑定数据 .enter().append("g") //创建缺少的页面元素 .attr('class', 'barRect') .attr("id", function(d, i) { return "barRect-" + i; }); //定义矩形的位置 //x为矩形最左端的位置 //y为矩形最顶端的位置 bars.append("rect") .attr('class','bar-rect') .attr("width",16) //长方形的宽度 .attr("y", function(d) { return y(d.value); //使用比例尺确定坐标Y值 }) .attr("x", function(d) { return x(d.date) - 8; //使用比例尺确定坐标X值 }) .attr("height", function(d) { //条形的高度 return height - y(d.value); }) .attr('rx',10) //圆角 .attr('ry',10) //圆角 .attr('fill','url(#linear-gradient)'); //填充渐变色
您可能感兴趣的文章: