D3重繪刷子

我有一個問題，我幾個星期都無法解決。我正在研究此示例的修改版本：http://bl.ocks.org/mbostock/1667367我最初定義了畫筆，因此它的畫筆範圍在0.5到0.8之間。D3重繪刷子

var brush = d3.svg.brush() 
    .x(x2) 
    .extent([0.5, 0.8]) 
    .on("brush", brushed);

刷選擇顯示出來（在上下文圖形）在正確的位置，但重點區域的初始視圖仍然被設置爲整個數據集的程度（而不是的剪裁區域刷子）。我讀過定義畫筆不會自動強制重繪該區域，但似乎無法弄清楚如何使焦點區域的視圖自動縮放到畫筆範圍。有人可以提供一些關於這方面的意見嗎？

更新1 我現在有一個叫拉絲函數執行以下操作：

function brushed() { 
    x.domain(brush.empty() ? x2.domain() : brush.extent()); 
    focus.select("path").attr("d", Light_area); 
    focus.select(".x.axis").call(xAxis); 
    Light_line_overlay.select("path").attr("d", Light_area); 

    rules.select(".y.grid").call(make_x_axis_light() 
      .tickSize(-height, 0, 0) 
      .tickFormat("") 
    ); 

    var xx0=brush.x()(brush.extent()[0]); 
    var xx1=brush.x()(brush.extent()[1]); 

    brushfill.attr("x", xx0); 
    brushfill.attr("width", xx1-xx0); 
}

這是從例子...略有不同，因爲我一直在修改它做從不同的事情基本示例。但是，第一條評論意味着我應該在聲明刷子後調用刷新函數（請參閱第一篇文章）。但是，調用此函數不會執行任何操作（或者至少不會將焦點區域更新爲筆刷的範圍）。你有什麼建議嗎？

來源

2013-04-25 andyopayne

只要您的刷子範圍以編程方式更改，您需要執行類似於刷子功能的操作。調整x.domain大小，刷新視圖。

function brushed() { 
    x.domain(brush.empty() ? x2.domain() : brush.extent()); 
    focus.select("path").attr("d", area); 
    focus.select(".x.axis").call(xAxis); 
}

如果這樣不能解決您的問題，請考慮提供一些代碼示例。

來源

2013-04-25 03:38:06 widged

我很抱歉回答這兩年晚了，但我只是遇到了相同的情況，這是我在該主題上找到的唯一資源。我能夠弄明白，所以希望這會幫助其他任何人絆倒它。

原始問題中的代碼幾乎都是那裏的方式，它只是沒有在範圍初始化上正確縮放。

我使用的數據是一個ts鍵（這是紀元毫秒）的對象數組，用於我的x值。

// These are needed for the brush construction to know how to scale 
x2.domain(x.domain()); 
y2.domain(y.domain()); 

// Pick out the ~50% and ~80% marks from the data 
var N = data.length; 
var cx0 = new Date(data[Math.floor(N*0.50)].ts); 
var cx1 = new Date(data[Math.floor(N*0.80)].ts); 

// Construct with that extent, which will leave the 
// context box started in the correct position. 
var brush = d3.svg.brush() 
        .x(x2) 
        .extent([cx0, cx1]) 
        .on("brush", brushed) 
; 

// This is just the original brushed example 
function brushed() { 
    x.domain(brush.empty() ? x2.domain() : brush.extent()); 
    focus.select(".area").attr("d", line); 
    focus.select(".x.axis").call(xAxis); 
} 

... 

var focus = svg.append("g") 
       .attr("class", "focus") 
       .attr("transform", 
        "translate(" + margin.left + "," + margin.top + ")") 
; 

// Now that focus is defined we can manually update it 
brushed();

其實我一直在呼籲brushed在安裝的最後，只是爲了保持漂亮，但這裏的關鍵是隻是爲了說明，一旦focus定義，你可以打電話brushed做任何更新你想在那裏。

最終，您的主要問題似乎是在某種程度上獲得了正確的類型。使用[0.5, 0.8]工作初始化，但如果您檢查每當調用brushed實際滑動與鼠標的焦點，brush.extent()將[Date(), Date()]。這是有道理的，因爲我們將該範圍傳遞給x.domain。因此，在初始化畫筆之前設置所有縮放比例，以便初始化範圍可以是Date，然後其他所有內容都是肉汁。

來源

2015-06-04 13:36:40 yieldsfalsehood

D3重繪刷子

回答

相關問題