hovering on one class not working for classes defined before it

user_9311692 0
Viewed 63

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

.keya:hover ~ .keyb {

    fill:black;
} 

#keya:hover ~ #keyb {

    fill:black;
} 
<!DOCTYPE html>
<html lang="en">
<head>

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

    

</head>
<body>
    

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

    <script language = "javascript">

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

        var svg = d3.select("#mainsvg")
        .append("svg")
        .attr("height",height)
        .attr("width",width)
        
        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()
        .domain(data)
        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"])

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

                group
        .selectAll('whatever')
        .data(data_ready)
        .enter()
        .append('path')
        .attr('d', d3.arc()
            .innerRadius(0)
            .outerRadius(radius)
        )
        .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;})

    </script>

</body>
</html>

Now when I try to apply css as follows:

#keyb:hover ~ #keya {

    fill:black;
}

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

#keya:hover ~ #keyb {

    fill:black;
}

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>
   </g>
</svg>
d3.js css javascript
1 Answers

You can control the hover background change with mouseenter and mouseleave events:

group
  ...
  .on('mouseenter', function(d) { d3.select(this).attr('fill', 'black'); })
  .on('mouseleave', function(d) { d3.select(this).attr('fill', color(d.data.key)) });

See it's working in the snippet:

var height = 250;
        var width = 250;
        var radius = 100;

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

        var data = {a: 9, b: 20, c:30, d:8, e:12}
        console.log(data.key)

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

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

                group
        .selectAll('whatever')
        .data(data_ready)
        .enter()
        .append('path')
        .attr('d', d3.arc()
            .innerRadius(0)
            .outerRadius(radius)
        )
        .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;})
        .on('mouseenter', function(d) {
            d3.select(this).attr('fill', 'black');        })
        .on('mouseleave', function(d) {
            d3.select(this).attr('fill', color(d.data.key))
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id = "mainsvg" ></div>

user_107564890
Related