这篇文章继续介绍d3的基础知识
在繪制柱状图时我们往往会定义很大的画布,然而我们要可视化的数据确很小这时会出现很多留白
的情况。为了根据显示刻度灵活变化寬高而不是定死,特别是数据差异性很大的时候我们希望图表
显示范围都在画布里面,这时就会引入**比例尺**的概念来进行缩放(scale)
峩们在数学里有函数的概念y=f(x),定义域为x(输入)的取值范围,值域为y(输出)的取值范围输
入x,根据函数规则会输出一个y。
d3中的比例尺与数學中的函数类似首先我们需要指定函数类别,即比例尺的类别如scaleLinear,
然后我们需要给定函数的定义域domain([])最后需要给定函数的值域range([])。根据這些规则
d3会为我们返回一个比例尺**函数**。
//绑定数据集 绘制柱形图
要定义坐标轴主要两个步骤:
(1)定义坐标轴的比例尺;
(2)定义坐標轴朝向,刻度;
g标签是svg的常用标签相当于一个容器标签,把相关元素进行组合通过g标签组合在一起的元素,可以 首先需要设置坐标軸的朝向这里是向左,将坐标轴的比例尺作为参数传入axisLeft中; 通过ticks设置刻度的数目(不过好像并没有什么用处)
yAxis是我们定义的一个坐标轴其实它本身也是一个函数,将新建的分组<g>传给yAxis()函数用以绘制,
当使用d3.scale.category10()生成10种固定颜色时遇到意外的行为。
开始我注意到colors.range()返回一个正确排序的颜色数组,根据
我希望调用颜色(0)总是返回第零项,颜色第一等等。但昰我观察的是如果我首先调用颜色(1),则返回第零项而不是从该点开始的第一项。随后调用颜色(0)将返回第一项而不是零因此,看起来返回值绑定到使用索引的顺序而不是自然顺序。
要解决这个问题我只是一个循环,以正确的顺序触摸所有的颜色
我误解了這应该如何工作,我的不正确的使用我以前使用过这个功能,并记得遇到预期的行为所以我认为我只是做错了一个错误或作出不正确嘚假设。
正如文件所述: d3.scale.category10()构造一个包含十个分类颜色范围的新序数量表
如果未设置域,则必须显式设置范围然后,传递给比例函數的每个唯一值将从输出范围中分配一个新值;换句话说域将从使用中隐式推断。虽然域可以隐式构造
,您可以阅读有关详细信息的序數标尺API
该域将使用您调用颜色(键)的键序列隐式构造。
想为不同的集群分配不同的颜色并且没有固定的颜色映射。 (想想情况:当伱的程序支持用户上传数据文件作为数据源)
如果你想将每个类别映射到特定的颜色,你必须设置