hovering on one class not working for classes defined before it

I have a simple pie chart created in d3 using javascript. The complete code is as follows:

<!DOCTYPE html>
<html lang="en">

        <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>



    <div id = "mainsvg" ></div>

    <script language = "javascript">

        var height = 500;
        var width = 500;
        var radius = 100;

        var svg = d3.select("#mainsvg")
        var group = svg.append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        var data = {a: 9, b: 20, c:30, d:8, e:12}

        // set the color scale
        var color = d3.scaleOrdinal()
        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"])

        var pie = d3.pie()
        .value(function(d) {return d.value; })
        var data_ready = pie(d3.entries(data))

        .attr('d', d3.arc()
        .attr('fill', function(d){ return(color(d.data.key)) })
        .attr("stroke", "black")
        .style("stroke-width", "2px")
        .style("opacity", 0.7)
        .attr("id", function(d,i) { return "key"+d.data.key;})



Now when I try to apply css as follows:

#keyb:hover ~ #keya {


it doesn’t work. but the following code works fine if I swap the Ids.

#keya:hover ~ #keyb {


In the rendered HTML file, the keya is generated before keyb. Can this be the issue? If so, how to solve it?

<svg height="500" width="500">
   <g transform="translate(250,250)">
      <path d="M-97.61763144190508,-21.697880810631865A100,100,0,0,1,-59.42010289717102,-80.4316565270765L0,0Z" fill="#98abc5" stroke="black" id="keya" style="stroke-width: 2px; opacity: 0.7;"></path>
      <path d="M68.57057950864132,72.78788103694941A100,100,0,0,1,-74.13682616986182,67.10984283590366L0,0Z" fill="#8a89a6" stroke="black" id="keyb" style="stroke-width: 2px; opacity: 0.7;"></path>
      <path d="M6.123233995736766e-15,-100A100,100,0,0,1,68.57057950864132,72.78788103694941L0,0Z" fill="#7b6888" stroke="black" id="keyc" style="stroke-width: 2px; opacity: 0.7;"></path>
      <path d="M-59.42010289717102,-80.4316565270765A100,100,0,0,1,7.044813998280223e-14,-100L0,0Z" fill="#6b486b" stroke="black" id="keyd" style="stroke-width: 2px; opacity: 0.7;"></path>
      <path d="M-74.13682616986182,67.10984283590366A100,100,0,0,1,-97.61763144190508,-21.697880810631865L0,0Z" fill="#a05d56" stroke="black" id="keye" style="stroke-width: 2px; opacity: 0.7;"></path>

Source: CSS – Stack Overflow

November 27, 2021
Category : News
Tags: css | D3.js | javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.