Google可視化餅圖 - 更改文本座標

Question

我製作了一個簡單的圓環圖（基於Google可視化示例，網址爲https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#donut）。

由於它只顯示一個切片（另一個切片是透明/不可見的），因此我想將<text>元素移動到圖表的中心，即孔內。我知道它只涉及更新'x'和'y'座標屬性，但我無法在DOM中訪問它們，特別是因爲沒有ID /類可以掛起。

那麼，我怎樣才能在這個代碼中指定倒數第二個元素<g>的<text>元素？我想改變x="239.45622566746957" y="285.69328724429994"到x="200" y="200"

的Javascript首選，但也jQuery的罰款......

<div id="donutchart" style="position: relative;"> 
    <div style="position: relative; width: 560px; height: 412px;" dir="ltr"> 
     <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"> 
      <svg width="560" height="412" style="overflow: hidden;" aria-label="A chart."> 
       <defs id="defs"/> 
       <rect x="0" y="0" width="560" height="412" stroke="none" stroke-width="0" fill="#ffffff"/> 
       <g> 
        <text text-anchor="start" x="107" y="58.2" font-family="Arial" font-size="12" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Time spent at work</text> 
       </g> 
       <g> 
        <rect x="340" y="79" width="113" height="31" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/> 
       <g> 
        <rect x="340" y="79" width="113" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/> 
        <g> 
         <text text-anchor="start" x="357" y="89.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Work</text> 
        </g> 
        <rect x="340" y="79" width="12" height="12" stroke="none" stroke-width="0" fill="#b1d123"/> 
       </g> 
       <g> 
        <rect x="340" y="98" width="12" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/> 
        <rect x="340" y="98" width="12" height="12" stroke="none" stroke-width="0" fill-opacity="1" fill="none"/> 
       </g> 
      </g> 
      <g> 
       <path d="M179.37407264075225,181.84279120188216L127.43518160188061,144.10697800470538A107,107,0,0,1,214,100L214,164.2A42.800000000000004,42.800000000000004,0,0,0,179.37407,181.84279" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"/> 
       <text text-anchor="start" x="163.54377433253043" y="136.70671275570004" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">15%</text> 
      </g> 
      <g> 
       <path d="M214,164.2L214,100A107,107,0,1,1,127.43518,144.10697L179.37407264075225,181.84279120188216A42.800000000000004,42.800000000000004,0,1,0,214,164.19999" stroke="#ffffff" stroke-width="1" fill="#b1d123"/> 
       <text text-anchor="start" x="239.45622566746957" y="285.69328724429994" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">85%</text> 
      </g> 
      <g/> 
     </svg> 
    </div> 
</div> 
    <div style="display: none; position: absolute; top: 422px; left: 570px; white-space: nowrap; font-family: Arial; font-size: 12px; font-weight: bold;">85 (85%) 
    </div> 
    <div></div> 
</div> 

Answer 1

使用這樣的選擇：

document.querySelector('#donutchart svg > g:nth-last-child(2) text'); 

這不會在IE8的工作，因爲舊版本的IE不支持SVG。如果您需要支持IE8，則需要一個用於等效VML結構的選擇器。