Javascript d3轴和路径正在剪裁
我遇到了一个问题,我试图创建一个简单的带有轴的折线图,但这条线一直被剪切到y轴 我用它来设置轴和线的绘图区域Javascript d3轴和路径正在剪裁,javascript,graph,d3.js,Javascript,Graph,D3.js,我遇到了一个问题,我试图创建一个简单的带有轴的折线图,但这条线一直被剪切到y轴 我用它来设置轴和线的绘图区域 var HEIGHT = 400, WIDTH = 800, MARGINS = {top: 20, right: 20, bottom: 30, left: 50}, DRAWING_HEIGHT = HEIGHT - MARGINS.top - MARGINS.bottom, DRAWING_WIDTH = WIDTH - MARGINS.right - MARGINS.left,
var HEIGHT = 400,
WIDTH = 800,
MARGINS = {top: 20, right: 20, bottom: 30, left: 50},
DRAWING_HEIGHT = HEIGHT - MARGINS.top - MARGINS.bottom,
DRAWING_WIDTH = WIDTH - MARGINS.right - MARGINS.left,
xRange = d3.scale.linear().range([0, DRAWING_WIDTH]).domain([1947, 2011]),
yRange = d3.scale.linear().range([DRAWING_HEIGHT, 0]).domain([0, HEIGHT]);
xAxis = d3.svg.axis()
.scale(xRange)
.tickSize(12)
.tickFormat(d3.format("d"))
.orient("bottom")
.tickSubdivide(true);
yAxis = d3.svg.axis()
.scale(yRange)
.tickSize(10)
.orient("left")
.tickSubdivide(true);
visPanel.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(" + MARGINS.left + "," + (DRAWING_HEIGHT + MARGINS.top) + ")")
.call(xAxis);
visPanel.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ","+ MARGINS.top+ ")")
.call(yAxis);
graphableArea = visPanel.append("svg:g")
.attr("transform", "translate(" + MARGINS.left + "," + (MARGINS.top) + ")");
我的线路功能是:
var line = d3.svg.line().interpolate("basis")
.x(function(d) { return xRange(d.year) + MARGINS.right + 0.5; })
.y(function(d) { return yRange(d.amount) + 0.5; })
.interpolate("linear");
如果我从“.x(函数…”行中删除MARGINS.right,则该行结束于y轴
请解释一下d3是如何绘制轴的?也就是说,在我将其转换为一个点后,它是向右还是向左绘制轴?结果表明我的数据集与我预期的有点不同。重置x比例的域,它现在就可以工作了。查看页边距约定-。然后技巧是将宽度定义为totalWidth-margin.left-margin.right考虑使用“translate”(+MARGINS.left-xaxiscoffset,yOffset),xaxiscoffset设置为20px,而不是xRange(d.year)+MARGINS.right+0.5。最好不要向数据点添加任意值..方向(“左”)指示刻度和标签应绘制在轴线的左侧。谢谢!我再次查看了我的数据,发现x轴是从1946年开始的,而不是1947年,因此该年的x值为负值。。。