javascript - Google 可视化饼图 - 更改文本坐标

Question

我制作了一个简单的圆环图(基于 https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#donut 上的 Google 可视化示例)。

由于它只显示一个切片(另一个是透明/不可见的)，我想将 <text> 元素移动到图表的中心，即孔内。我知道它只涉及更新“x”和“y”坐标属性，但我在 DOM 中访问它们时遇到问题，特别是因为没有 ID/类可以挂起。

那么，如何定位此代码中倒数第二个 <text> 元素的 <g> 元素？我想将 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 结构的选择器。