Skip to main content

SVG pie chart (donut) slice selection via javascript, html, css

I have my css hover working correctly and I can hard code the css class and get the html to use .active but I cannot get my pie slices to switch to active state upon click. Additionally, after I get this working, I want to be able to select multiple pie slices and capture the id's. I'm not that great with javascript so... be gentle with me :) page header

<!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);
}
Via Active questions tagged javascript - Stack Overflow https://ift.tt/rbUlWxp
Labels:

Comments

Post a Comment

Popular posts from this blog

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console...
Post a Comment
Read more

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

The number of nodes and edges I calculated manually and by a method provided by networkx library dont match

I am trying to analyse a graph using networkx library in Python. I have implemented a function that returns the nodes and edges of that graph. After that I counted the number of nodes and edges by implementing the len() function for nodes and edges, which gave me 17 for both nodes and edges. However, when I used the method graph.number_of_nodes() of networkx library it gave me 53. My code: import pandas as pd import networkx as nx import matplotlib.pyplot as plt header_list = ["a","b","w"] E =pd.read_csv("aves-barn-swallow-contact-network.edges",sep=" ",header= None,names=header_list) # print(E.head()) # prints first few rows of the csv file G = nx.from_pandas_edgelist(E,"a","b",["w"]) nx.draw(G) plt.show() class GraphAnalyse: #finding nodes and edges def nodeEdge(self,Graph): nodes = Graph.nodes() edges = Graph.edges() ...
Post a Comment
Read more