2015-01-20 182 views
1

我用D3從我們的數據庫中繪製了一些數據,我得到了一整年的數據來計算我們的趨勢線(上午8點,12點,下午4點和晚上9點的取值),我在圖表中繪製了每個X(時間)的路徑和值。D3趨勢線域

現在我的問題是趨勢線的領域當然大於我們現在的價值(可以說下午2點,我的趨勢線將一直持續到晚上9點)。我得到的關閉是趨勢線的域設置,以我目前的數據域,它返回此: Test1

xTrend.domain(d3.extent(trendData, function (d) { return d.date; })); 

我怎樣才能砍它,所以它不會超越SVGs寬度?我嘗試設置寬度屬性,它不起作用,所以我的猜測是它與域有關。

如果我設置了趨勢線的域到它的數據,我得到這個: Test2

xTrend.domain(d3.extent(data, function (d) { return d.date; })); 

PS:雖然我們在這,如果有人能指出我如何,我可以看到,如果我行以上-below我的趨勢線將是巨大的;)

更新: 感謝@lhoworko 我加入這個

svg.append("defs").append("clipPath") 
     .attr("id", "clip") 
     .append("rect") 
     .attr("width", width) 
     .attr("height", height); 

這對我行路

.attr("clip-path", "url(#clip)") 

回答

1

看看D3夾路徑。它將確保超出圖表末尾的行不顯示。

看看這裏。

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

+0

謝謝你解決了!我用我的width - height添加了一個剪輯路徑矩形,並將其作爲屬性添加到我的trendLine路徑中。完善! (不能upvote,我還是新來哈哈:() – Ceps 2015-01-20 20:46:49