为什么我画出来的图横坐标轴是小数呢?

来源:2-4 坐标系绘制

124098263

2017-01-10 16:19

var width = 500,
height = 250,
margin = {left:50, top:30, right:20, bottom:20},
g_width = width - margin.left - margin.right,
g_height = height - margin.top - margin.bottom;
//svg
var svg = d3.select("#container")
.append("svg")
//width,height
.attr("width",width)
.attr("height",height)

var g = d3.select("svg")
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")")

var data = [1, 4, 5, 8, 7, 3, 6]

// 缩放函数
var scale_x = d3.scale.linear()
// 输入范围
.domain([0,data.length-1])
//输出范围
.range([0,g_width])
var scale_y = d3.scale.linear()
// 输入范围
.domain([0,d3.max(data)])
//输出范围
.range([g_height,0])

//绘制函数
var line_generator = d3.svg.line()
.x(function(d,i) { return scale_x(i);})
.y(function(d) { return scale_y(d);})
.interpolate("cardinal")

d3.select("g")
.append("path")
.attr("d",line_generator(data))

var x_axis = d3.svg.axis().scale(scale_x),
y_axis = d3.svg.axis().scale(scale_y).orient("left");

g.append("g")
.call(x_axis)
.attr("transform","translate(0,"+g_height+")")

g.append("g").call(y_axis)

代码就是照着老师敲的,但是这个横坐标怎么了?

http://img.mukewang.com/587498ee0001106b04950251.jpg

写回答 关注

1回答

  • yks_
    2017-01-18 03:02:48

    你是引用的d3 v3的包吗?

使用D3制作图表

教你使用最酷的数据可视化图表,初探数据可视化奥秘

37890 学习 · 112 问题

查看课程

相似问题