d3比例尺坐标轴

这篇文章继续介绍d3的基础知识比例尺在绘制柱状图时，我们往往会定义很大的画布，然而我们要可视化的数据确很小，这时会出现很多留白的情况。为了根据显示刻度灵活变化宽高，而不是定死，特别是数据差异性很大的时候，我们希望图表显示范围都在画布里面，这时就会引入比例尺的概念来进行缩放（scale）。我们在数学里有函数的概念y=f(x),定义域为x（输入）的取值范围，值域为y（输出）的取值范围。输入x,根据函数规则会输出一个y。d3中的比例尺与数学中的函数类似，首先我们需要指定函数类别，即比例尺的类别，如scaleLinear，scalePow, scaleQuantise, scaleOrdinal, scaleSqrt, scaleLog, scaleSequential等等。然后我们需要给定函数的定义域domain([])，最后需要给定函数的值域range([])。根据这些规则，d3会为我们返回一个比例尺函数。示例var linearScale=d3.scaleLinear().domain([0,d3.max(dataset,function (d) { return d;})]).range([0,height]);//这里linearScale为一个函数，我们可直接执行linearScale(d)完整示例import * as d3 from “d3”;var width=300;//svg画布宽var height=200;//svg画布高var rectWidth=30;//每个矩形的默认宽度var dataset=[45,70,12,79,4,127,33,90];//定义画布var svg=d3.select(“body”).append(“svg”).attr(“width”,width).attr(“height”,height).style(“background-color”,“yellow”);//定义比例尺var linearScale=d3.scaleLinear().domain([0,d3.max(dataset,function (d) { return d;})]).range([0,height]);//绑定数据集绘制柱形图svg.selectAll(“rect”).data(dataset).enter().append(“rect”).attr(“width”,rectWidth-2).attr(“height”,function (d,i) { return linearScale(d)}).attr(“x”,function (d,i) { return rectWidth*i}).attr(“y”,200).attr(“transform”,function (d,i) { return translate(0,${linearScale(-d)})}).attr(“fill”,“blue”)结果结果显示，数据集被比例尺进行缩放（scale）可视化出来。 d3还提供很多数据处理的方法，max min extent sum median mean shuffle等等。坐标轴要定义坐标轴，主要两个步骤：（1）定义坐标轴的比例尺；（2）定义坐标轴朝向，刻度；示例import * as d3 from “d3”;var width = 300;//svg画布宽var height = 200;//svg画布高var dataset = [45, 70, 12, 79, 4, 127, 33, 150];var testDataset = [4.5, 7.0, 1.2, 7.9, 0.4, 12.7, 3.3, 9.0];var rectWidth = 30;//每个矩形的默认宽度//定义画布var svg = d3.select(“body”).append(“svg”).attr(“width”, width).attr(“height”, height).style(“background-color”, “yellow”);//定义矩形比例尺var linearScale = d3.scaleLinear().domain([0, d3.max(dataset, function (d) { return d;})]).range([0, 200]);var g = svg.append(“g”).attr(“transform”, “translate(40,0)”);g.selectAll(“rect”).data(dataset).enter().append(“rect”).attr(“width”, rectWidth - 2).attr(“height”, function (d, i) { return linearScale(d)}).attr(“x”, function (d, i) { return rectWidth * i}).attr(“y”, 200).attr(“transform”, function (d, i) { return translate(0,${linearScale(-d)})}).attr(“fill”, “blue”);//定义坐标轴比例尺var yScale = d3.scaleLinear().domain([0, d3.max(dataset, function (d) { return d;})]).range([200,0]);//定义坐标轴var yAxis = d3.axisLeft(yScale).ticks(5);//调用坐标轴g.append(“g”).attr(“transform”, translate(0,0)).call(yAxis);结果补充知识点1.“g”标签g标签是svg的常用标签，相当于一个容器标签，把相关元素进行组合。通过g标签组合在一起的元素，可以通过g标签设置属性等，进行坐标变换等操作，如attr(“transform”,“translate()”),进行元素平移；2.定义坐标轴 var yAxis = d3.axisLeft(yScale) .ticks(5);首先需要设置坐标轴的朝向，这里是向左，将坐标轴的比例尺作为参数传入axisLeft中；通过ticks设置刻度的数目（不过好像并没有什么用处）3.call（） g.append(“g”) .attr(“transform”, translate(0,0)) .call(yAxis);yAxis是我们定义的一个坐标轴，其实它本身也是一个函数，将新建的分组<g>传给yAxis()函数，用以绘制，所以这句代码等价于yAixs (g.append(“g”) ) ;