请检查我的问题LIVE DEMO。我有使用d3pie的以下SVG图表。我想获取包含特定文本的类的数据索引。
<g id="p0_labelGroup1-inner" data-index="1" class="p0_labelGroup-inner" style="opacity: 1;" transform="translate(450.1232024190018,191.39093931346983)"><text id="p0_segmentPercentage1-inner" class="p0_segmentPercentage-inner" style="font-size: 12px; font-family: verdana; fill: rgb(225, 225, 225);">0.0000%</text></g>
我想获取0.0000%内具有class="p0_segmentPercentage-inner"值的数据索引值
，然后隐藏这些<g>元素（如果它们的值与data-index相同，并隐藏那些具有0.0000%文本的元素）。
有可能吗？
答案 0 :(得分：0)
您可以使用纯JavaScript来执行此操作，但是由于您使用D3对其进行了标记，因此这是D3解决方案：
首先，选择所需的文本元素。例如，我们可以选择所有文本并按所需的值对其进行过滤：
const textElement = d3.selectAll("text").filter(function() {
return this.textContent === "0.0000%";
});
然后，使用<g>获得其容器parentNode元素，最后使用dataset（或getAttribute）获得其data属性：
const indexValue = textElement.node().parentNode.dataset.index;
这是演示：
const textElement = d3.selectAll("text").filter(function() {
return this.textContent === "0.0000%";
});
const indexValue = textElement.node().parentNode.dataset.index;
console.log(indexValue)<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="800" height="400"><text x="400" y="395" id="p0_footer" class="p0_footer" text-anchor="left" fill="#666666" style="font-size: 14px; font-family: arial;"></text><g class="p0_lineGroups" style="opacity: 1;"><g class="p0_lineGroup"><path d="M491.15163053406434,92.31660628306354L493.0180945067275,89.23455331196043C494.88455847939076,86.15250034085729,498.61748642471713,79.98839439865105,502.35041437004355,75.3753446038469C506.0833423153699,70.76229480904274,509.8162702606964,67.70030116164067,511.6827342333595,66.16930433793964L513.5491982060228,64.63830751423859" stroke="#cccccc" stroke-width="1" fill="none" style="opacity: 1;"></path></g><g class="p0_lineGroup"><path d="M540.4670768542032,175.7044720142457L543.2531761894797,174.95494675590294C546.0392755247562,174.20542149756014,551.6114741953094,172.7063709808746,557.1836728658624,171.20335813641756C562.7558715364154,169.7003452919605,568.3280702069684,168.193370119732,571.1141695422449,167.43988253361775L573.9002688775215,166.6863949475035" stroke="#cccccc" stroke-width="1" fill="none" style="opacity: 1;"></path></g><g class="p0_lineGroup"><path d="M432.6541744258205,341.7217831108627L433.291975585968,343.0198883146936C433.9297767461155,344.3179935185245,435.20537906641056,346.91420392618625,436.7565837070006,351.60297890817645C438.3077883475906,356.2917538901667,440.13459530847564,363.0730934464853,441.0479987889182,366.46376322464465L441.96140226936075,369.85443300280394" stroke="#cccccc" stroke-width="1" fill="none" style="opacity: 1;"></path></g><g class="p0_lineGroup"><path d="M261.49260795860516,238.0626538645721L260.11783041043367,238.39424038079187C258.7430528622621,238.72582689701167,255.9934977659191,239.38899992945122,250.4943875732331,240.21170016099708C244.995277380547,241.0344003925429,236.74661209151796,242.0166278231949,232.62227944700342,242.50774153852095L228.49794680248888,242.99885525384698" stroke="#cccccc" stroke-width="1" fill="none" style="opacity: 1;"></path></g><g class="p0_lineGroup"><path d="M287.9318356024055,113.67586742020083L284.54706177310214,111.19127629908756C281.16228794379884,108.70668517797431,274.39274028519213,103.73750293574778,269.87970851278766,99.92106894093008C265.36667674038324,96.10463494611241,263.110160854181,93.44094919870356,261.9819029110799,92.10910632499916L260.85364496797877,90.77726345129473" stroke="#cccccc" stroke-width="1" fill="none" style="opacity: 1;"></path></g></g><g transform="translate(400,202.5)" class="p0_pieChart"><g class="p0_arc" transform="rotate(0)"><path id="p0_segment0" fill="#00adf2" style="stroke: rgb(255, 255, 255); stroke-width: 1; fill: rgb(0, 173, 242);" data-index="0" d="M8.756224613903576e-15,-143A143,143,0,0,1,140.4670768542033,-26.79552798575429L0,0Z"></path></g><g class="p0_arc" transform="rotate(79.20000000000176)"><path id="p0_segment1" fill="#6d6e71" style="stroke: rgb(255, 255, 255); stroke-width: 1; fill: rgb(109, 110, 113);" data-index="1" d="M8.756224613903576e-15,-143L0,0Z"></path></g><g class="p0_arc" transform="rotate(79.20000000000176)"><path id="p0_segment2" fill="#88001b" style="stroke: rgb(255, 255, 255); stroke-width: 1; fill: rgb(136, 0, 27);" data-index="2" d="M8.756224613903576e-15,-143A143,143,0,0,1,11.965931596523166,142.49847887267896L0,0Z"></path></g><g class="p0_arc" transform="rotate(254.40000000000097)"><path id="p0_segment3" fill="#0ed145" style="stroke: rgb(255, 255, 255); stroke-width: 1; fill: rgb(14, 209, 69);" data-index="3" d="M8.756224613903576e-15,-143A143,143,0,0,1,5.988218483275437,-142.87456470413676L0,0Z"></path></g><g class="p0_arc" transform="rotate(256.8000000000009)"><path id="p0_segment4" fill="#3f48cc" style="stroke: rgb(255, 255, 255); stroke-width: 1; fill: rgb(63, 72, 204);" data-index="4" d="M8.756224613903576e-15,-143A143,143,0,0,1,139.22178311086242,32.65417442582156L0,0Z"></path></g></g><g class="p0_labels-inner"><g id="p0_labelGroup0-inner" data-index="0" class="p0_labelGroup-inner" style="opacity: 1;" transform="translate(418.90541974114683,145.06434724059085)"><text id="p0_segmentPercentage0-inner" class="p0_segmentPercentage-inner" style="font-size: 12px; font-family: verdana; fill: rgb(225, 225, 225);">22.0000%</text></g><g id="p0_labelGroup1-inner" data-index="1" class="p0_labelGroup-inner" style="opacity: 1;" transform="translate(450.1232024190018,191.39093931346983)"><text id="p0_segmentPercentage1-inner" class="p0_segmentPercentage-inner" style="font-size: 12px; font-family: verdana; fill: rgb(225, 225, 225);">0.0000%</text></g><g id="p0_labelGroup2-inner" data-index="2" class="p0_labelGroup-inner" style="opacity: 1;" transform="translate(386.4068330143447,283.62277881159036)"><text id="p0_segmentPercentage2-inner" class="p0_segmentPercentage-inner" style="font-size: 12px; font-family: verdana; fill: rgb(225, 225, 225);">48.6667%</text></g><g id="p0_labelGroup3-inner" data-index="3" class="p0_labelGroup-inner" style="opacity: 1;" transform="translate(295.13738636589176,226.03437367476226)"><text id="p0_segmentPercentage3-inner" class="p0_segmentPercentage-inner" style="font-size: 12px; font-family: verdana; fill: rgb(225, 225, 225);">0.6667%</text></g><g id="p0_labelGroup4-inner" data-index="4" class="p0_labelGroup-inner" style="opacity: 1;" transform="translate(306.00553366800307,156.93060342788937)"><text id="p0_segmentPercentage4-inner" class="p0_segmentPercentage-inner" style="font-size: 12px; font-family: verdana; fill: rgb(225, 225, 225);">28.6666%</text></g></g><g class="p0_labels-outer"><g id="p0_labelGroup0-outer" data-index="0" class="p0_labelGroup-outer" style="opacity: 1;" transform="translate(519.5491982060228,67.66018251423858)"><text id="p0_segmentMainLabel0-outer" class="p0_segmentMainLabel-outer" style="font-size: 10px; font-family: verdana; fill: rgb(51, 51, 51);">Panel wait</text></g><g id="p0_labelGroup1-outer" data-index="1" class="p0_labelGroup-outer" style="opacity: 1;" transform="translate(579.9002688775215,169.70826994750348)"><text id="p0_segmentMainLabel1-outer" class="p0_segmentMainLabel-outer" style="font-size: 10px; font-family: verdana; fill: rgb(51, 51, 51);">Stop with NO alarm</text></g><g id="p0_labelGroup2-outer" data-index="2" class="p0_labelGroup-outer" style="opacity: 1;" transform="translate(447.96140226936075,372.87630800280397)"><text id="p0_segmentMainLabel2-outer" class="p0_segmentMainLabel-outer" style="font-size: 10px; font-family: verdana; fill: rgb(51, 51, 51);">Distance between panels</text></g><g id="p0_labelGroup3-outer" data-index="3" class="p0_labelGroup-outer" style="opacity: 1;" transform="translate(126.43544680248888,246.02073025384698)"><text id="p0_segmentMainLabel3-outer" class="p0_segmentMainLabel-outer" style="font-size: 10px; font-family: verdana; fill: rgb(51, 51, 51);">Stop with alarm</text></g><g id="p0_labelGroup4-outer" data-index="4" class="p0_labelGroup-outer" style="opacity: 1;" transform="translate(191.35364496797877,93.79913845129472)"><text id="p0_segmentMainLabel4-outer" class="p0_segmentMainLabel-outer" style="font-size: 10px; font-family: verdana; fill: rgb(51, 51, 51);">In process</text></g></g></svg></div>