d3轴和路径正在削减

我正在运行一个问题，我试图用轴创建一个简单的折线图，但该线一直在剪切到y轴。d3轴和路径正在削减

我使用它来设置坐标轴和线的绘图区域。

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");

如果我从删除MARGINS.right“.X（功能......”线，则线y轴结束。

可能有些请解释D3如何绘制一个轴？那就是，当我把它转变为一个点，它绘制轴向右或向左？

来源

2013-03-25 simpleCoder

查看关于保证金惯例的页面 - http://bl.ocks.org/mbostock/3019563。接下来的技巧是将宽度定义为totalWidth - margin.left - margin.right – widged 2013-03-25 03:36:24

考虑使用“translate（”+ MARGINS.left - xAxisOffset，yOffset），xAxisOffset设置为20px而不是xRange（d.year）+ MARGINS。正确的+ 0.5。最好不要将任意值添加到数据点。 – widged 2013-03-25 08:51:48

.orient（“left”）表示刻度线和标签应绘制在轴线的左侧。 – widged 2013-03-25 08:53:20

原来我的数据集是不是有点不一样我预料到了，重置doma在x规模和现在的作品。

来源

2013-03-25 21:58:29 simpleCoder

d3轴和路径正在削减

回答

相关问题