通过 javascript、html、css 选择 SVG 饼图（甜甜圈）切片
SVG pie chart (donut) slice selection via javascript, html, css
我的 css 悬停正常工作，我可以硬编码 css class 并让 html 使用 .active 但我无法得到我的馅饼单击时切片切换到活动状态。此外，在我完成这项工作后，我希望能够 select 多个饼图切片并捕获 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);
}
您的活动 class 没有任何效果，因为您路径的填充属性具有更高的特异性。
像这样改变你 css:
.active path{
fill: purple;
transform: scale(.92, .92);
}
要激活 pi 段或 non-active 您可以使用 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>
@herrstrietzel 提供的两个示例都有效。
我的 javascript 标签位置错误（在 header 中）。一旦我将它们移动到页面底部附近 </body> 的正上方，一切都完美无缺！
我的 css 悬停正常工作，我可以硬编码 css class 并让 html 使用 .active 但我无法得到我的馅饼单击时切片切换到活动状态。此外，在我完成这项工作后，我希望能够 select 多个饼图切片并捕获 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);
}
您的活动 class 没有任何效果，因为您路径的填充属性具有更高的特异性。
像这样改变你 css:
.active path{
fill: purple;
transform: scale(.92, .92);
}
要激活 pi 段或 non-active 您可以使用 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>
@herrstrietzel 提供的两个示例都有效。
我的 javascript 标签位置错误（在 header 中）。一旦我将它们移动到页面底部附近 </body> 的正上方，一切都完美无缺！