如何添加一個矩形到D3中的指定座標軸

Question

D3中有一個可縮放的區域圖，效果很好。現在我正試圖在圖的中間沿x軸指定的位置添加一個矩形。但是，我似乎無法弄清楚如何做到這一點。 「rect」元素使用圖的絕對（x，y）指定，因此當使用縮放時，它保持在相同的位置。

所以我想知道是否有一種方法可以在繪圖時將「rect」與軸綁定，以便它可以從所有縮放和平移行爲中受益，或者是否需要手動編輯x，y，寬度和長度的矩形根據翻譯以及找出相應的x和y座標在圖上？我試圖使用「矩形」，因爲它似乎是最靈活的元素使用。

感謝

亞歷

Answer 1

我不知道你是怎麼做的變焦，但我猜你正在改變你與你的軸使用尺度的參數？您應該可以使用相同的比例放置矩形。

如果您從繪圖座標開始，那麼可能在刻度上使用反轉函數將有助於（至少可用於定量刻度），例如， https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-linear_invert

您應該能夠獲取初始繪圖座標並將其反轉以確定數據座標，然後可以隨着刻度的變化移動。

如果標尺是線性的，你或許可以顛倒的長度和寬度太大，但是你必須計算偏移，如果您的域名不包括0。最簡單的是計算矩形的終點，是這樣的：

var dataX0 = xScale.invert(rect.x); 
var dataX1 = xScale.invert(rect.x + rect.width); 
var dataWidth = dataX1 - dataX0; 

如果在軸上的座標數據已經你應該能夠做一些事情，如：

var rectData = [{x: 'April 1, 1999', y: 10000, width: 100, height:100}]; 
svg.selectAll('rect.boxy') 
    .data(rectData) 
    .enter().append('rect').classed('boxy', true) 
    .style('fill','black'); 

svg.selectAll('rect.boxy') 
    .attr('x', function(d) { return x(new Date(d.x));}) 
    .attr('y', function(d) { return y(d.y);}) 
    .attr('width', function(d) { return d.width;}) 
    .attr('height', function(d) { return d.height;}); 

根據您提供的例子，其中x和y（如函數）的軸是基於規模。