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

Using the spread operator in a component's render function could potentially lead to an endless update loop

How can I duplicate or extract all the formatting applied to a specific text selection in Ckeditor?

Encountering a CORS issue while attempting to make a GET request to an API in an

What are the steps for building modules using Vuex and fetching data using mapState()?

Every time I click a button, I am trying to add JSON objects into an array and then show the outcomes

input value does not change when the "keyup" event is triggered

Adjust positioning of navigation when hovered over

Saving maps on React Native can be done easily using AsyncStorage

Display the datepicker beneath the input field

Is there a way to manually stop a file upload (stream) using a XMLHttpRequest on the server?

Is there a way to directly access the React component that was clicked?

How do I store the result of an Ajax request as a variable in a different function within a React component?

Sorting of dates in mui-datatables is not accurate

Adjusting the transparency of numerous elements using JavaScript or jQuery

``The presence of symlink leading to the existence of two different versions of React

When the text in a Material UI Textfield is updated using setState in React, the Hinttext may overlap with the newly set

Significant delay in processing second jQuery Ajax call

React's connect method is causing issues with my test case

Trouble with firing the click event using document.createElement('a') in Firefox

Tips for sending a Json array to a servlet