d3.js学习13

表格线

先定义svg环境

var height = 500,width = 500,margin = 25;var svg = d3.select("body").append("svg").attr("class","axis").attr("width", width).attr("height", height);

绘制X轴

function renderXAxis(){var axisLength = width - 2 * margin;//定义尺度的值域var scale = d3.scale.linear().domain([0,100]).range([0,axisLength]);//设置尺度var xAxis = d3.svg.axis().scale(scale).orient("bottom");//x轴svg.append("g")//g代表一组图形，加到svg中.attr("transform",function(){return "translate(" + margin + "," + (height - margin) + ")";//transform.translate定义2d转换})
　　　　　　　　　 .attr("class","x-axis")//设定包含10个g的大类g类名为x-axis.call(xAxis);//call相当于调用xAxis这个变量或方法
}
renderXAxis();

可以看出，生成了值域为0-100的一组（10个）"g"，它的类别为"tick"。在renderXAxis()方法中添加代码（call()方法之后）

d3.selectAll("g.x-axis g.tick")//选中所有g下类别为tick.append("line").classed("grid-line",true).attr("x1",0)//起点横坐标.attr("y1",0).attr("x2",0).attr("y2",-(height - 2* margin));

为什么要设置x-axis这个类别而不直接使用g.tick？因为一会儿还要画纵坐标。

在svg中，0，0坐标代表左上角

附translate.transform（x,y），在这里。

同理，绘制出renderYAxis()方法

function renderYAxis(){var axisLength = height - 2* margin;var scale = d3.scale.linear().domain([100,0]).range([0, axisLength]);var yAxis = d3.svg.axis().scale(scale).orient("left");svg.append("g").attr("class","y-axis").attr("transform",function(){return "translate(" + margin + "," + margin + ")";}).call(yAxis);d3.selectAll("g.y-axis g.tick").append("line").classed("grid-line",true).attr("x1",0).attr("y1",0).attr("x2",axisLength).attr("y2",0);
}

这里注意2点，第一点为值域为100到0，因为纵坐标是由上向下，第二点是虚线的位置。

结果：

 动态尺度网格线

var height = 500,width = 500,margin = 50,xAxis, yAxis, xAxisLength, yAxisLength;var svg = d3.select("body").append("svg").attr("class","axis").attr("width", width).attr("height", height);

横坐标函数，与上例基本一致，某些变量改为环境变量（用于rescale）

function renderXAxis(){xAxisLength = width - 2 * margin;//定义尺度的值域var scale = d3.scale.linear().domain([0,100]).range([0,xAxisLength]);//设置尺度xAxis = d3.svg.axis().scale(scale).orient("bottom");//x轴svg.append("g")//g代表一组图形，加到svg中.attr("class","x-axis").attr("transform",function(){return "translate(" + margin + "," + (height - margin) + ")";//transform.translate定义2d转换}).call(xAxis);//call相当于调用xAxis这个变量或方法d3.selectAll("g.x-axis g.tick").append("line").classed("grid-line",true).attr("x1",0)//起点横坐标.attr("y1",0).attr("x2",0).attr("y2",-(height - 2* margin));
}

Y坐标轴同理

function renderYAxis(){yAxisLength = height - 2* margin;var scale = d3.scale.linear().domain([100,0]).range([0, yAxisLength]);yAxis = d3.svg.axis().scale(scale).orient("left");svg.append("g").attr("class","y-axis").attr("transform",function(){return "translate(" + margin + "," + margin + ")";}).call(yAxis);d3.selectAll("g.y-axis g.tick").append("line").classed("grid-line",true).attr("x1",0).attr("y1",0).attr("x2",yAxisLength).attr("y2",0);
}

调整内部网格线的方法（删除旧的-添加新的-画线）

function renderXGridLines(){var lines = d3.selectAll("g.x-axis g.tick").select("line.grid-line").remove();lines = d3.selectAll("g.x-axis g.tick").append("line").classed("grid-line",true);lines.attr("x1",0).attr("y1",0).attr("x2",0).attr("y2",-yAxisLength);
}
function renderYGridLines(){var lines = d3.selectAll("g.y-axis g.tick").select("line.grid-line").remove();lines = d3.selectAll("g.y-axis g.tick").append("line").classed("grid-line",true);lines.attr("x1",0).attr("y1",0).attr("x2", xAxisLength).attr("y2",0);
}

重做尺度，调用绘制新网格线

这里生成了一个max的随机数，用于重做尺度值域，实际情况替换即可

function rescale(){var max = Math.round(Math.random()*100);xAxis.scale().domain([0,max]);//更改值域svg.select("g.x-axis").transition().call(xAxis);yAxis.scale().domain([max,0]);//更改值域svg.select("g.y-axis").transition().call(yAxis);renderXGridLines();renderYGridLines();
}

最后，依旧是调用绘制坐标轴

renderXAxis();
renderYAxis();

使用button调用rescale函数

ReScale

会生成具有动态效果的坐标轴

转载于:https://www.cnblogs.com/valentineisme/p/4255203.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！