d3js绘制y坐标轴_d3.js ---画坐标轴

画坐标轴

//使用d3的svg的axis()方法生成坐标轴

var x_axis = d3.svg.axis().scale(scale_x),

y_axis = d3.svg.axis().scale(scale_y)

g.append("g")

.call(x_axis)

页面效果如下:这个时候x轴在页面的上方,不在我们想要的位置,可以通过设置transform属性将坐标轴移到自己想要的位置

66461801f6b31b5ca71720d30d7c7894.png

画y轴

g.append("g")

.call(y_axis)

效果如下,这个时候x轴在页面的上方,不在我们想要的位置,所以要让y轴旋转

a8b83e7886b03debb8f04918afd3e8fa.png

y轴旋转代码:加上 orient()

y_axis = d3.svg.axis().scale(scale_y).orient("left")

旋转后的效果图如下:会发现y轴的数值是由大变小而不是由小变大,这是因为在计算机页面中的时候和几何数学中的坐标轴哦的方向是不一样的

普通数学坐标系:

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
是的,可以使用d3.js在地图上绘制点,需要以下步骤: 1. 定义地图投影函数,将经纬度坐标转换为屏幕坐标。比如使用d3.geoMercator()投影函数。 2. 创建一个SVG元素,并将地图投影函数应用于它,以确保点的位置正确。 3. 通过d3.csv()函数从CSV文件或其他数据源中读取点的经纬度坐标。 4. 使用d3.selectAll()函数选择SVG元素,并使用data()函数将点的经纬度坐标绑定到元素上。 5. 使用enter()函数添加圆形元素,并使用地图投影函数将经纬度坐标转换为屏幕坐标,将圆心设置为屏幕坐标。 6. 设置圆形元素的半径、颜色等属性,以及添加事件监听器等操作。 以下是一个简单的示例代码: ```javascript //定义地图投影函数 var projection = d3.geoMercator(); //创建SVG元素 var svg = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 500); //从CSV文件中读取点的经纬度坐标 d3.csv("data.csv", function(data) { //绑定数据 var circles = svg.selectAll("circle") .data(data); //添加圆形元素,并设置位置和半径 circles.enter() .append("circle") .attr("cx", function(d) { return projection([d.lon, d.lat])[0]; }) .attr("cy", function(d) { return projection([d.lon, d.lat])[1]; }) .attr("r", 5) .attr("fill", "red"); //添加事件监听器等操作 circles.on("mouseover", function(d) { d3.select(this).attr("fill", "blue"); }) .on("mouseout", function(d) { d3.select(this).attr("fill", "red"); }); }); ``` 注意:以上代码仅为示例,实际应用中需要根据具体需求进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值