0

軸を持つ単純な折れ線グラフを作成しようとしているが、線が 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,
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(function...」行から MARGINS.right を削除すると、行は y 軸になります。

d3 がどのように軸を描くか説明してもらえますか? つまり、点に変換した後、軸は右または左のどちらに描画されますか?

4

1 に答える 1

0

私のデータセットは、私が予想していたものとは少し異なっていました。xスケールのドメインをリセットすると、今すぐ機能します。

于 2013-03-25T21:58:29.663 に答える