var width=600; var height=600; var svg=d3.select("body").append("svg").attr("width",width).attr("height",height); // 用于坐标轴的线性比例尺 var xScale = d3.scaleLinear().domain([0,10]).range([0,300]); // 定义坐标轴 var xAxis=d3.axisBottom().scale(xScale); // 在svg中添加一个包含坐标轴各元素的g元素 var gAxis=svg.append("g").attr("transform","translate(80,80)");//平移到(80,80) // 在gAxis中绘制坐标轴 xAxis(gAxis); 注意,如果您看的是《精通d3.js》在坐标轴那一节课中,由于版本更新,scale().linear()改为scaleLinear(),svg.axis().orient()改为 axisBottom();(axisTop,axisLeft,axisRight)

本文介绍使用D3.js绘制坐标轴的过程,包括创建SVG元素、定义线性比例尺及坐标轴,并展示了如何将坐标轴放置到指定位置。适用于希望掌握D3.js基本绘图技巧的读者。

被折叠的 条评论
为什么被折叠?



