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軸和路徑正在削減

回答

相關問題