D3 .classed() not updating stroke/fill in SVG elements, however inline styles works.

[dheerajy1]

Hello,

Platform:

I am coding in observable Notebook using observable plot. I would like Observablehq community help for an issue I am facing regarding classes

Issue:

Facing an issue where the classes added to an element on plot is not displaying the styles as per the requirement defined in classes.

Description of Issue:

As shown in the video below,

1. when I place my cursor near to a data point, the class is target gets added to the target element and the intended output should display the styles as per the described in this target class for this element like fill, stroke, r.

2. To the contrary this element is not picking up styles and this is my issue. I am adding the styles inside the svg element which is owner to the target element.

I hope this explains my issue.

I have copied and built up on Fill's code which selects an element as per the pointer. Multiple line chart with hover.

Please correct me if I missed any logic, I tried chatGPT and did not solve this issue, the solution it provided is, to use !important, it did not solve though.

Note:

_However, if I add the classes to a HTML observable Notebook cell with style tags then it works, nonetheless, i would like to add the style element to svg owner element.

Code:

The code responsible for my issue

targetElement
        .classed("is-target", true) // Add class to matched elements
        .filter((i) => values.x[i] != x || values.y[i] != y)
        .classed("is-target", false) // Remove is-target from unmatched elements
        .raise();

The code that works well when I use direct styling

    targetElement
        .style("stroke", "blue")
        .style("fill", "red")
        .attr("r", 8)
        .filter((i) => values.x[i] != x || values.y[i] != y)
        .style("stroke", null)
        .style("fill", null)
        .attr("r", 3)
        .raise();

Observable Notebook: Observable Notebook Link

Please see the issue is action:

Screen.Recording.2025-03-27.223606.mp4

Conclusion:

I would like your help for the issue facing regarding the classed true added to an element and thank you in advance.

[dheerajy1]

hello,

I finally managed to resolve the issue.

Reason:

The issue was caused by using a randomly generated ${id} in the style selector. Since the direct parents of the targetElements did not have this generated ID, the target elements did not apply the styles, even though .is-target was added with .classed(true).

Solution:

For the styles to take effect, the parent element must have the corresponding class. Instead of using a randomly generated ${id}, I used the existing class of the element. This ensures that the target elements correctly inherit and apply the styles.

Working code

  // Select the existing <style> element inside the SVG
    let styleElement = d3.select(svg).select("style");
    const svgClass = d3.select(svg).attr("class");

    // Get existing styles
    let existingStyles = styleElement.html();

    // Define the new CSS rule
    const newStyleRule = `
.${svgClass} .is-target { 
  ${Object.entries(targetElementStyles)
    .map(([key, value]) => `${key}: ${value};`)
    .join(" ")} 
}`;

    // Prevent duplicate styles
    if (!existingStyles.includes("is-target".trim())) {
      styleElement.html(existingStyles + newStyleRule);
    }

Now, the target elements correctly apply the styles as expected.

Thank you.