【D3.js数据可视化实战】 |
您所在的位置：网站首页 › 画图3d网格线怎样找出颜色 › 【D3.js数据可视化实战】 |
【D3.js数据可视化实战】
|
我们常常使用常规图表（直方图，折线图等）来表现数据。为了清楚的表示数据在数轴上的哪个数值区间，会直接在矩形和点上标注数值。 除了这个办法外，还可以使用色调偏淡的网格作为背景参照。 本文介绍了如何使用D3绘制网格线的小技巧： 绘制效果：
思路很简单： 1 绘制SVG容器。 2 给SVG分组，并设置分组的样式类。 3 为分组分别添加横线和竖线。 关键技术介绍 (1) 生成一个10元素的数组：
(4) 给SVG添加分组，并设置样式类 var grid = svg.selectAll(".grid") .data(x.ticks(10)) .enter().append("g") .attr("class", "grid"); (5) 添加线条 grid.append("line") .attr("x1", x) .attr("x2", x) .attr("y1", p) .attr("y2", h - p - 1); … 本例很简单，可以使用下面的代码测试效果，你学会了吗？ 完整代码： linegrid //分组中线的样式，这里设置了颜色值，实际使用可以更淡，例如stroke: #ccc .gridline { stroke: #000; } var data = d3.range(10);// (1) 生成一个10元素的数组 var w = 960, h= 500, p= 40,//内边距 x= d3.scale.linear().domain([0, 1]).range([p, w - p]), //(2) 定义x和y比例尺 y= d3.scale.linear().domain([0, 1]).range([h - p, p]); //(3) 绘制SVG var svg = d3.select("body").append("svg") .attr("width", w) .attr("height", h); //(4) 给SVG添加分组，并设置样式类，样式见标签中的设置 var grid = svg.selectAll(".grid") .data(x.ticks(10)) .enter().append("g") .attr("class", "grid"); //(5) 添加线条，设置起始坐标(x1,y1)和结束坐标(x2,y2)的值即可 //竖线 grid.append("line") .attr("x1", x) .attr("x2", x) .attr("y1", p) .attr("y2", h - p - 1); //横线 grid.append("line") .attr("y1", y) .attr("y2", y) .attr("x1", p) .attr("x2", w - p + 1); |
【本文地址】