如何使用d3.js向3D餅圖添加不重疊的折線和文本標簽？

Question

我已經在 DavidB 編寫的現有代碼上注釋了額外的代碼，並創建了 這個示例來僅提取一個 3d 餅圖。 我想向餅圖添加多段線（非重疊）和文本標簽。 任何建議都非常感謝。 預期結果應如下所示。

Answer 1

如何防止 SVG 文本重疊

由於文本是絕對定位的，因此沒有很好的方法來處理重疊標簽。 SVGs有tspan元素，可以讓你自動換行，但僅此而已。

在我的一個數據可視化項目中，我們不得不處理許多需要在圖形縮小時調整大小的標簽。 我們處理這個問題的方法是計算可用空間。 然后“模擬”文本的總大小 label（在給定的字體大小下）使用：

selection.node().getBBox().width
selection.node().getBBox().height

如果新的 label的尺寸重疊，那么您將使用較小的字體再次嘗試，直到 label 的尺寸小於可用空間。 這不是一個很好的解決方案......

生成 SVG 個元素（為了測量它們的大小）的一個問題是它會觸發重新渲染，考慮到迭代次數，這是昂貴的。

您可以通過使用<canvas>計算給定 label 的大小而不渲染任何內容來提高這種“蠻力”方法的性能：

  let canvasEl = document.createElement('canvas');
  let canvas = canvasEl.getContext('2d').font('12px sans-serif');
  const getWidthHeightOfLabel = (label) => {
    return { 
      width: canvas.measureText(label).width, 
      height: canvas.measureText(label).height
    };
  } 

在某些情況下，我們完全避免了 SVG 標簽，並選擇了普通的舊 HTML 文本，我們將動態地在 SVG 之上添加 position。

如果我的建議不清楚或者您需要其他信息，請告訴我。 謝謝。