使用d3在旋轉的線條上繪制以創建縮放效果

Question

我正在研究這個plnkr 。 我有三條線在角度30,45和60.我想在這些線上應用一個畫筆，這樣當圖表被刷過時，線條會在它穿過拉絲矩形的地方重新繪制，並且軸上的值是適當的。 非常感謝任何幫助或暗示解決這個問題。

編輯：如果您有不同的解決方案來繪制旋轉的線條並刷在它們上面，它也受到歡迎。 請幫忙。

var ga = d3.select("svg")
    .append("g")
    .attr("class", "a axis")
    .attr("transform", "translate(" + margin.left + "," + (height + margin.top) + ")")
    .selectAll("g")
    .data([30, 45, 60])
    .enter()
    .append("g")
    .attr("class", "rotatedlines")
    .attr("transform", function(d) { return "rotate(" + -d + ")"; })
    .attr("stroke-width", 1)
    .attr("stroke", "black")
    .attr("stroke-dasharray", "5,5");

Answer 1

解釋我的解決方案：

采取的基本步驟如下：

• 將x和y比例的域更新為畫筆范圍
• 重繪軸
• 計算線的比例因子和平移
• 相應地縮放和轉換行容器
• 重置畫筆

請注意，步驟3和4僅是必要的，因為您沒有使用比例繪制所有內容 - 更好的方法是為每行定義兩個點作為綁定到元素的數據，然后使用比例重繪。 這將使代碼更簡單。

盡管你的方法仍然可行。 為了方便它，我對你的代碼進行了一些修改 - 特別是，我已經清理了不同翻譯的各種嵌套g元素，並通過x1 ， x2 ， y1 ， y2屬性定義了行，而不是通過翻譯容器。 這兩個更改都使您想要的功能更容易實現，因為只需要進行單個轉換，而不需要考慮多個其他轉換。 我還在多個g元素中嵌套了這些行，以便可以更輕松地縮放和轉換它們。

刷子處理函數現在看起來像這樣：

// update scales, redraw axes
var extent = brush.extent();
x.domain(brush.empty() ? x2.domain() : [ extent[0][0], extent[1][0] ]);
y.domain(brush.empty() ? y2.domain() : [ extent[0][1], extent[1][1] ]);
xAxisG.call(xAxis);
yAxisG.call(yAxis);

此代碼應該是相當不言自明的 - 比例的域根據畫筆的當前范圍更新並重新繪制軸。

// compute and apply scaling and transformation of the g elements containing the lines
var sx = (x2.domain()[1] - x2.domain()[0])/(x.domain()[1] - x.domain()[0]),
    sy = (y2.domain()[1] - y2.domain()[0])/(y.domain()[1] - y.domain()[0]),
    dx = -x2(x.domain()[0]) - x2.range()[0],
    dy = -y2(y.domain()[1]) - y2.range()[1];
d3.selectAll("g.container")
  .attr("transform", "translate(" + [sx * dx, sy * dy] + ")scale(" + [sx, sy] + ")");

這是一個棘手的部分 - 基於尺度的新領域，我們需要計算線的比例和平移。 縮放因子只是舊范圍與新范圍的比率（請注意，我已經制作了未修改的標度的副本），即大於1的數字。平移確定（0,0）的偏移坐標和計算通過舊（0,0）坐標（我從原始尺度范圍得到這個）和新域原點根據原始尺度的位置的差值來計算。

在同時應用平移和縮放時，我們需要將偏移與縮放因子相乘。

// reset brush
brush.clear();
d3.select(".brush").call(brush);

最后，我們清除畫筆並重置它以擺脫灰色矩形。

在這里完成演示。

Answer 2

您可以通過d3.event.target.extent()訪問畫筆范圍。 繪制比例的流程如下：

• 設定比例
• 設置軸
• 繪制軸

刷完成后，您必須修改比例，然后根據當前的x和y域重新繪制軸。 這是你的意思嗎？

我稍微清理了一下代碼並進行了一些演示： http : //plnkr.co/edit/epKbXbcBR2MiwUOMlU5A?p=preview