通过 javascript、html、css 选择 SVG 饼图（甜甜圈）切片答案

【问题标题】：SVG pie chart (donut) slice selection via javascript, html, css通过 javascript、html、css 选择 SVG 饼图（甜甜圈）切片
【发布时间】：2022-02-11 14:18:55
【问题描述】：

我的 css 悬停工作正常，我可以硬编码 css 类并让 html 使用 .active，但我无法让我的饼图切片在单击时切换到活动状态。此外，在我完成这项工作后，我希望能够选择多个饼图并捕获 id。我对 javascript 不是很好，所以……对我温柔点 :) 页眉

<!DOCTYPE html>
<html >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

<style>

</style>
<script language="javascript" type="text/javascript"> 

/* this is for selecting and deselecting svg pie pieces 
$('group_path').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
}); */

/* This is the javascript to select pie pieces */
// Get the container element
var group_pathContainer = document.getElementById("4");
var group_paths = group_pathContainer.querySelectorAll(".group_path");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < group_paths.length; i++) {
  group_paths[i].addEventListener("click", function(e) {
    var current = e.currentTarget;
    // toggle active class to the current/clicked button
    current.classList.toggle('active');
    getActive();
  });
}

// list all active pie segemnts
function getActive(){
  let actives = document.querySelectorAll('.active');
  let idArray = [];
  actives.forEach(function(el,i){
    let id = el.id;
    idArray.push(id)
  })
  console.log(idArray)
}

</script>

svg

 <svg viewBox='-1 -1 2 2' style='transform: scale(1.0); rotate(-90deg)';>
                <g id="4" >
                      <g id="4.01" class="active" fill='rgb(84,161,229)' >
                      <path stroke='white' stroke-width='.0125px' d='M 1.000000 0.000000 A 1 1 0 0 1 0.873262 0.487250 L 0 0 '></path>
                      <text d='M 1.000000 0.000000 A 1 1 0 0 1 0.873262 0.487250 L 0 0 ' fill="none" x="0.9">Project</text>
                      </g>
                       <g id="4.02" class="active" fill='rgb(242,162,84)'>
                      <path  stroke='white' stroke-width='.0125px' d='M 0.873262 0.487250 A 1 1 0 0 1 -0.147119 0.989119 L 0 0 '></path>
                      </g>
                       <g id="4.03" class="group_path" fill='rgb(237,110,133)' >
                    <path stroke='white' stroke-width='.0125px' d='M -0.147119 0.989119 A 1 1 0 0 1 -0.689114 0.724653 L 0 0 '></path>
                    </g>
                       <g id="4.04" class="group_path" fill='rgb(173,205,225)' >
                    <path stroke='white' stroke-width='.0125px' d='M -0.689114 0.724653 A 1 1 0 0 1 -0.915241 0.402907 L 0 0 '></path>
                    </g>
                       <g id="4.05" class="group_path" fill='rgb(187,221,147)' >
                    <path stroke='white' stroke-width='.0125px' d='M -0.915241 0.402907 A 1 1 0 0 1 -0.946085 0.323917 L 0 0 '></path>
                    </g>
                       <g id="4.06" class="group_path" fill='rgb(238,158,155)' >
                    <path stroke='white' stroke-width='.0125px' d='M -0.946085 0.323917 A 1 1 0 0 1 -0.978581 -0.205863 L 0 0 '></path>
                    </g>
                       <g id="4.07" class="group_path active" fill='rgb(84,161,229)' >
                    <path stroke='white' stroke-width='.0125px' d='M -0.978581 -0.205863 A 1 1 0 0 1 -0.879316 -0.476238 L 0 0 '></path>
                    </g>
                       <g id="4.08" class="group_path" fill='rgb(108,190,191)'>
                   <path stroke='white' stroke-width='.0125px' d='M -0.879316 -0.476238 A 1 1 0 0 1 -0.527846 -0.849340 L 0 0 '></path>
                   </g>
                       <g id="4.09" class="group_path" fill='rgb(242,162,84)' >
                    <path stroke='white' stroke-width='.0125px' d='M -0.527846 -0.849340 A 1 1 0 0 1 0.056518 -0.998402 L 0 0 '></path>
                    </g>
                       <g id="4.10" class="group_path" fill='rgb(237,110,133)'>
                    <path stroke='white' stroke-width='.0125px' d='M 0.056518 -0.998402 A 1 1 0 0 1 0.543760 -0.839241 L 0 0 '></path>
                    </g>
                       <g id="4.11" class="group_path" fill='rgb(173,205,225)'>
                    <path stroke='white' stroke-width='.0125px' d='M 0.543760 -0.839241 A 1 1 0 0 1 0.711535 -0.702650 L 0 0 '></path>
                    </g>
                       <g id="4.12" class="group_path" fill='rgb(187,221,147)'>
                    <path stroke='white' stroke-width='.0125px' d='M 0.711535 -0.702650 A 1 1 0 0 1 0.724653 -0.689114 L 0 0 '></path>
                    </g>
                       <g id="4.13" class="group_path" fill='rgb(42,228,229)'>
                    <path stroke='white' stroke-width='.00625px' d='M 0.724653 -0.689114 A 1 1 0 0 1 1.000000 -0.000000 L 0 0 '></path>
                    </g>                      
                    <circle fill='#fff' cx='0' cy='0' r='0.80'/>
                </g>

css

.group_path:hover{
 /* fill: purple; */
  transform: scale(.95, .95);
}
.group_path.active { 
  fill: purple;
  transform: scale(.92, .92);
}

【问题讨论】：

是否有理由将古老的 Javascript 和 DOM 方法与现代 SVG 元素结合使用？该代码在 2011 年基本可以工作，现在十多年后 JS 和 DOM 方法已经发展了很多。除此之外，请注意，空白字符不是类名的一部分。
唯一的原因是我的无知。我不怎么做 JavaScript。我的大部分经验都是一些用于隐藏容器切换的 Jquery。
@不需要 jquery - 但它也不应该造成任何伤害。您的 <script> 元素应该放在 html 的底部（所以在结束 </body> 标记之前（所以不在 .
就是这样！！！谢谢你。我认为所有脚本都在标题中。可能是我的php背景让我这么想！再次感谢您。

标签： javascript html css svg pie-chart

【解决方案1】：

您的活动类没有任何效果，因为您的路径的填充属性具有更高的特异性。
像这样改变你的CSS：

.active path{ 
  fill: purple;
  transform: scale(.92, .92);
}

要将 pi 段设置为活动或非活动，您可以使用classList.toggle() 方法：

/* This is the javascript to select pie pieces */
// Get the container element
var group_pathContainer = document.getElementById("4");
var group_paths = group_pathContainer.querySelectorAll(".group_path");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < group_paths.length; i++) {
  group_paths[i].addEventListener("click", function(e) {
    var current = e.currentTarget;
    // toggle active class to the current/clicked button
    current.classList.toggle('active');
    getActive();
  });
}

// list all active pie segemnts
function getActive(){
  let actives = document.querySelectorAll('.active');
  let idArray = [];
  actives.forEach(function(el,i){
    let id = el.id;
    idArray.push(id)
  })
  console.log(idArray)
}

svg{
  display:inline-block;
  width:20em;
  border: 1px solid #ccc
}


.active path{ 
  fill: purple;
  transform: scale(.92, .92);
}

<svg viewBox='-1 -1 2 2' style='transform: scale(1.0); rotate(-90deg)' >
  <g id="4">
    <g id="4.01" class="group_path">
      <path fill='rgb(84,161,229)' stroke='white' stroke-width='.0125px' d='M 1.000000 0.000000 A 1 1 0 0 1 0.873262 0.487250 L 0 0 '></path>
      <text d='M 1.000000 0.000000 A 1 1 0 0 1 0.873262 0.487250 L 0 0 ' fill="none" x="0.9">Project</text>
    </g>
    <g id="4.02" class="group_path">
      <path fill='rgb(242,162,84)' stroke='white' stroke-width='.0125px' d='M 0.873262 0.487250 A 1 1 0 0 1 -0.147119 0.989119 L 0 0 '></path>
    </g>
    <g id="4.03" class="group_path">
      <path fill='rgb(237,110,133)' stroke='white' stroke-width='.0125px' d='M -0.147119 0.989119 A 1 1 0 0 1 -0.689114 0.724653 L 0 0 '></path>
    </g>
    <g id="4.04" class="group_path">
      <path fill='rgb(173,205,225)' stroke='white' stroke-width='.0125px' d='M -0.689114 0.724653 A 1 1 0 0 1 -0.915241 0.402907 L 0 0 '></path>
    </g>
</svg>

示例 2：按组定义填充

/* This is the javascript to select pie pieces */
// Get the container element
var group_pathContainer = document.getElementById("4");
var group_paths = group_pathContainer.querySelectorAll(".group_path");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < group_paths.length; i++) {
  group_paths[i].addEventListener("click", function(e) {
    var current = e.currentTarget;
    // toggle active class to the current/clicked button
    current.classList.toggle('active');
    getActive();
  });
}

// list all active pie segemnts
function getActive(){
  let actives = document.querySelectorAll('.active');
  let idArray = [];
  actives.forEach(function(el,i){
    let id = el.id;
    idArray.push(id)
  })
  console.log(idArray)
}

svg{
  display:inline-block;
  width:20em;
  border: 1px solid #ccc
}


.group_path.active { 
  fill: purple;
  transform: scale(.92, .92);
}

<svg viewBox='-1 -1 2 2' style='transform: scale(1.0); rotate(-90deg)' >
  <g id="4">
    <g id="4.01" class="group_path" fill='rgb(84,161,229)'>
      <path stroke='white' stroke-width='.0125px' d='M 1.000000 0.000000 A 1 1 0 0 1 0.873262 0.487250 L 0 0 '></path>
      <text d='M 1.000000 0.000000 A 1 1 0 0 1 0.873262 0.487250 L 0 0 ' fill="none" x="0.9">Project</text>
    </g>
    <g id="4.02" class="group_path" fill='rgb(242,162,84)'>
      <path  stroke='white' stroke-width='.0125px' d='M 0.873262 0.487250 A 1 1 0 0 1 -0.147119 0.989119 L 0 0 '></path>
    </g>
    <g id="4.03" class="group_path" fill='rgb(237,110,133)'>
      <path  stroke='white' stroke-width='.0125px' d='M -0.147119 0.989119 A 1 1 0 0 1 -0.689114 0.724653 L 0 0 '></path>
    </g>
    <g id="4.04" class="group_path" fill='rgb(173,205,225)'>
      <path  stroke='white' stroke-width='.0125px' d='M -0.689114 0.724653 A 1 1 0 0 1 -0.915241 0.402907 L 0 0 '></path>
    </g>
</svg>

【讨论】：

您好，谢谢！我修改了 svg 以将填充移动到组而不是路径并且它工作但我仍然无法获得切换组标记中的类的切换。当我手动更改类时，css 和填充工作。但我做了我的 css - .active group_path{
Nothing I do 用鼠标选择任何东西。我只能用类对元素进行硬编码。我必须下载一些 js 信息/库吗？我认为直接将其编码到 html 页面上的脚本中可以缓解这种需求。
@Vets：不需要图书馆。我添加了一个新示例。它应该是.group_path.active {...}，因为 .group_path 和 .active 处于同一级别
您的两个示例都完全按照我希望的方式工作，但我的选择没有发生。我错过了一个js标签吗？ <script language="javascript" type="text/javascript"> 是我包装 js 代码的方式，而 ` ` 是我结束它的方式。我很困惑为什么没有选择。还有什么可能不允许选择但允许硬编码的类工作？感谢您的时间和帮助。
@Vets：你可以在你的答案中添加一个新的 sn-p，这样我就可以检查你当前的代码

【解决方案2】：

@herrstrietzel 提供的两个示例都有效。

我的 javascript 标记位于错误的位置（在标题中）。一旦我将它们移动到页面底部附近的</body> 上方，一切都完美无缺！

【讨论】：

很高兴它成功了。然后您可以接受将答案标记为已接受；）