Is there a way to cursor-select text in SVG/d3.js as easily as in typical HTML or other text editors?

Question

Is there a way to cursor-select text in SVG/d3.js as easily as in typical HTML or other text editors?

Currently utilizing d3.js to create a layout graph akin to the one found here: https://bl.ocks.org/mbostock/950642

However, I've encountered a challenge when attempting to copy and paste the node labels. When referring to the provided link, it's cumbersome to select text as desired. Only by double-clicking on the label can I pinpoint a specific sequence of characters.

When trying to select text with special characters like Mlle.Vaubois, only portions such as Mlle or Vaubois are selectable. The entire string is unable to be highlighted (Refer to the image below).

https://i.sstatic.net/E67VV.png

In addition, it's not possible to select arbitrary character sequences within a given string. For example, selecting the two middle letters 'll' from 'Mlle.Vaubois' is problematic; highlighting stops after the first 'l' (View screenshot below).

https://i.sstatic.net/TsW4t.png

The objective is to have the capability to freely select any sequence similar to that in a standard browser. For instance, being able to choose 'rce La' from the HTML text 'Labeled Force Layout' enables smooth Ctrl + C and Ctrl + V functionality (Shown in the image below).

https://i.sstatic.net/yoaA0.png

This issue extends beyond d3.js, as evident in another SVG-based example demonstrated here: http://jsfiddle.net/wPYvS/

https://i.sstatic.net/QI6iw.png

The discrepancy in how SVG handles text selection compared to standard HTML text in browsers or common text editors raises questions. Is there a feasible solution to rectify this? Your insights are appreciated. Thank you.

css html d3.js svg

Answer 1

Answer №1

In this demonstration, a click event listener is assigned to all elements with the "node" class. When clicked, the handler will highlight all text within the node.

var nodes = document.querySelectorAll(".node");

nodes.forEach( function(elem) {
  elem.addEventListener("click", selectText);
});

function selectText(event) {
  var selection = document.getSelection();
  var range = selection.getRangeAt(0);
  range.selectNode(event.target);
}

<svg width="500" height="200>
  <g class="node" transform="translate(275.4819543667187,131.9805407488932)">
    <image xlink:href="https://github.com/favicon.ico" x="-8" y="-8" width="16" height="16"></image>
    <text dx="12" dy=".35em">Mlle.Vaubois</text>
  </g>
</svg>

Answer 2

In this demonstration, a click event listener is assigned to all elements with the "node" class. When clicked, the handler will highlight all text within the node.

var nodes = document.querySelectorAll(".node");

nodes.forEach( function(elem) {
  elem.addEventListener("click", selectText);
});

function selectText(event) {
  var selection = document.getSelection();
  var range = selection.getRangeAt(0);
  range.selectNode(event.target);
}

<svg width="500" height="200>
  <g class="node" transform="translate(275.4819543667187,131.9805407488932)">
    <image xlink:href="https://github.com/favicon.ico" x="-8" y="-8" width="16" height="16"></image>
    <text dx="12" dy=".35em">Mlle.Vaubois</text>
  </g>
</svg>

Is there a way to cursor-select text in SVG/d3.js as easily as in typical HTML or other text editors?

Answer №1

Similar questions

Adjusting the width of a div element using a button

Generate clickable links on a web page with PHP and a form

Unable to open fancybox from a skel-layer menu

Preventing child elements from inheriting properties in a sequential order

Detecting the click area within a window using JavaScript to automatically close an element

Struggling with adding information to chat page using PHP

Hidden Angular NgbDatepicker panel

Using jQuery and Regular Expressions to modify the styling of the initial few words

Guide to vertically centering Font Awesome icons inside a circular div

IE and Chrome are experiencing issues where the radio buttons are disappearing

When the cursor hovers over the card, I want to show an image that stretches across the space above the footer and beneath the horizontal line, without spilling over the edges

Animating background color change with scroll in React using fade effect

The image is not appearing on the webpage even though the online URLs are functioning correctly

Adjust the color of error messages in shiny from red

I've found that my div element refuses to be centered on the screen unless I explicitly define

Tips for identifying the correct selectedIndex with multiple select elements present on one page

The display: flex property is not being properly implemented in Tailwind CSS for the sm:flex

"Encountering challenges with integrating Addthis on a WordPress website

Tutorial on embedding navigation menu from an external file without using Wamp; all the code should be executed on the client-side

Encrypting and salting the data provided by the user