I am having trouble specifying a class within an SVG using D3.js

Question

I am having trouble specifying a class within an SVG using D3.js

I have been facing a strange issue with my script. When I try to execute the following code:

var key="#US"
d3.select(key).style("fill", "red");

it seems like it's not working for me. Interestingly, when I run the same code in the console, it works perfectly fine.

I have tried using functions like document.ready and window.onload, but none of them seem to solve the problem.

After experimenting with different approaches, I came up with this solution:

window.onload = function() {
    Object.keys(countries).forEach(function(key){
        d3.select(key).style("fill", "red");
    });
};

Object.keys(countries).forEach(function(key){
    d3.select(key).style("fill", "red");
    console.log("t")
});

The strange thing is that it only seems to work when the dev console is active, and even then it only works 1 out of every 4 times. This error has got me puzzled.

javascript d3.js

Answer 1

Answer №1

In this unique scenario, I acquired an SVG world map and addressed the class attributes by substituting spaces with hyphens.

Currently, when presented with a map resembling the following:

const countries = {
  '.United-States': true
};

You can now identify the US and its associated regions, and color them red, using:

Object.keys(countries).forEach(function(key) {
  d3.selectAll(key).style("fill", "red");
});

Innovative demonstration

If there was sufficient time available, all path class names could potentially be converted into a 2 or 3-digit country code for enhanced simplicity to align better with your selection approach.

const svgUrl = 'https://gist.githubusercontent.com/rmkane/4fb74736f090d9145b53e56d7e42989e/raw/e3e6fc625094ab84b3b2381afc447cf109bc601a/world.svg';
const svgContainer = document.querySelector('#svg-container');

const countries = {
  '.United-States': true
};

const parseSvg = (svgText) =>
  new DOMParser().parseFromString(svgText, 'image/svg+xml');

(async () => {
  const response = await fetch(svgUrl);
  let svgText = await response.text();
  // Rectify path class names
  svgText = svgText.replaceAll(/class="(\w+)\s(\w+)"/g, 'class="$1-$2"');
  const svg = parseSvg(svgText).firstElementChild;
  // Integrate the SVG
  svgContainer.append(svg);
  // Prominently feature US and its territories
  Object.keys(countries).forEach(function(key) {
    d3.selectAll(key).style('fill', 'red');
  });
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="svg-container"></div>
<!-- See: https://gist.github.com/rmkane/4fb74736f090d9145b53e56d7e42989e#file-world-svg -->

Alternate illustration

This specific example involves an SVG sourced from MapSVG:

const svgUrl = 'https://gist.githubusercontent.com/rmkane/4fb74736f090d9145b53e56d7e42989e/raw/ce11d29d4595e9c386bac41efaa82d33b8f07aec/world-2.svg';
const svgContainer = document.querySelector('#svg-container');

const countries = {
  '#US': true
};

const parseSvg = (svgText) =>
  new DOMParser().parseFromString(svgText, 'image/svg+xml');

(async () => {
  const response = await fetch(svgUrl);
  let svgText = await response.text();
  const svg = parseSvg(svgText).firstElementChild;
  svgContainer.append(svg);
  Object.keys(countries).forEach(function(key) {
    d3.selectAll(key).style('fill', 'red');
  });
})();

#svg-container svg {
  background: lightblue;
}

#svg-container svg path {
  fill: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="svg-container"></div>
<!-- See: https://gist.github.com/rmkane/4fb74736f090d9145b53e56d7e42989e#file-world-2-svg -->

Answer 2

In this unique scenario, I acquired an SVG world map and addressed the class attributes by substituting spaces with hyphens.

Currently, when presented with a map resembling the following:

const countries = {
  '.United-States': true
};

You can now identify the US and its associated regions, and color them red, using:

Object.keys(countries).forEach(function(key) {
  d3.selectAll(key).style("fill", "red");
});

Innovative demonstration

If there was sufficient time available, all path class names could potentially be converted into a 2 or 3-digit country code for enhanced simplicity to align better with your selection approach.

const svgUrl = 'https://gist.githubusercontent.com/rmkane/4fb74736f090d9145b53e56d7e42989e/raw/e3e6fc625094ab84b3b2381afc447cf109bc601a/world.svg';
const svgContainer = document.querySelector('#svg-container');

const countries = {
  '.United-States': true
};

const parseSvg = (svgText) =>
  new DOMParser().parseFromString(svgText, 'image/svg+xml');

(async () => {
  const response = await fetch(svgUrl);
  let svgText = await response.text();
  // Rectify path class names
  svgText = svgText.replaceAll(/class="(\w+)\s(\w+)"/g, 'class="$1-$2"');
  const svg = parseSvg(svgText).firstElementChild;
  // Integrate the SVG
  svgContainer.append(svg);
  // Prominently feature US and its territories
  Object.keys(countries).forEach(function(key) {
    d3.selectAll(key).style('fill', 'red');
  });
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="svg-container"></div>
<!-- See: https://gist.github.com/rmkane/4fb74736f090d9145b53e56d7e42989e#file-world-svg -->

Alternate illustration

This specific example involves an SVG sourced from MapSVG:

const svgUrl = 'https://gist.githubusercontent.com/rmkane/4fb74736f090d9145b53e56d7e42989e/raw/ce11d29d4595e9c386bac41efaa82d33b8f07aec/world-2.svg';
const svgContainer = document.querySelector('#svg-container');

const countries = {
  '#US': true
};

const parseSvg = (svgText) =>
  new DOMParser().parseFromString(svgText, 'image/svg+xml');

(async () => {
  const response = await fetch(svgUrl);
  let svgText = await response.text();
  const svg = parseSvg(svgText).firstElementChild;
  svgContainer.append(svg);
  Object.keys(countries).forEach(function(key) {
    d3.selectAll(key).style('fill', 'red');
  });
})();

#svg-container svg {
  background: lightblue;
}

#svg-container svg path {
  fill: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="svg-container"></div>
<!-- See: https://gist.github.com/rmkane/4fb74736f090d9145b53e56d7e42989e#file-world-2-svg -->

I am having trouble specifying a class within an SVG using D3.js

Answer №1

Innovative demonstration

Alternate illustration

Similar questions

Save the HTML elements in an object and then use the ng-include directive to include the template

If a different link is selected, remove the class from the ID, and vice versa

Angular 2 Aot Issue: CRITICAL ERROR: CALL_AND_RETRY_LAST Allocation unsuccessful - JavaScript heap exhausted

Combine two events in jQuery using the AND operator

filtering the properties of mongoose documents

How can I simply show a specific value from an object in Vue?

Switch between showing and hiding a div by clicking on an image

Combining strings and variables in Vue.js with the use of bootstrap-vue syntax

Calculate the total count of responses within the JSON data returned

Send out data every 250 milliseconds in a way that resembles debounceTime(), but without any waiting period

Issue encountered while creating a token in a JavaScript Chrome extension and attempting to validate it on a backend Node.js server

Preventing a Click Event on Child Element from Triggering the Parent's Click Event in jQuery

Use CSS media queries to swap out the map for an embedded image

Error in MEAN Stack: Unable to access the property 'companyTitle' because it is undefined

The browser encountered an issue trying to load a resource from a directory with multiple nested levels

Utilize the grouping functionality provided by the Lodash module

The Angular performance may be impacted by the constant recalculation of ngStyle when clicking on various input fields

Modifying the language of the response (error/success) in stripe.js

Obtaining the name of the image that has been uploaded using jQuery

The error message is indicating that the property `match` is being attempted on an undefined object. This issue is puzzling as it does not reference any specific files or