Mixing
How to cursor-select SVG/d3.js text just like normal HTML text or any other text editor?
I'm using d3.js to draw a layout graph like this one: https://bl.ocks.org/mbostock/950642
But I found that it's very difficult to copy-and-paste the node's label. Take the above link as an example, I can't drag the text to select any sequence. I can only double-click the label to select a certain char sequence.
If I try to select the text with a special char like Mlle.Vaubois, I can only get Mlle or Vaubois selected, I cannot get the whole string Mlle.Vaubois selected. (See the below picture)
Moreover, I can't select arbitrary char sequence inside that string. For example, I can't select the middle two letters: ll inside Mlle.Vaubois. The highlighting stopped right after the first l is selected. (See below:)
I just want to be able to select any sequence as I want, like in a browser. For example, I can select rce La from the HTML text: Labeled Force Layout as below. Then I can Ctrl + C and Ctrl + V as I wish.
This issue is not just for d3.js, because another more general SVG example also has this issue: http://jsfiddle.net/wPYvS/
I don't know why SVG handles text selection so different with normal HTML text in a browser or any mainstream text editor? How to solve it? Thanks.
html css html5 d3.js svg
asked Nov 22 '18 at 5:42
Yang LuoYang Luo
8561437
|
show 1 more comment
I'm using d3.js to draw a layout graph like this one: https://bl.ocks.org/mbostock/950642
But I found that it's very difficult to copy-and-paste the node's label. Take the above link as an example, I can't drag the text to select any sequence. I can only double-click the label to select a certain char sequence.
If I try to select the text with a special char like Mlle.Vaubois, I can only get Mlle or Vaubois selected, I cannot get the whole string Mlle.Vaubois selected. (See the below picture)
Moreover, I can't select arbitrary char sequence inside that string. For example, I can't select the middle two letters: ll inside Mlle.Vaubois. The highlighting stopped right after the first l is selected. (See below:)
I just want to be able to select any sequence as I want, like in a browser. For example, I can select rce La from the HTML text: Labeled Force Layout as below. Then I can Ctrl + C and Ctrl + V as I wish.
This issue is not just for d3.js, because another more general SVG example also has this issue: http://jsfiddle.net/wPYvS/
I don't know why SVG handles text selection so different with normal HTML text in a browser or any mainstream text editor? How to solve it? Thanks.
html css html5 d3.js svg
asked Nov 22 '18 at 5:42
Yang LuoYang Luo
8561437
3
Text selection in an SVG is a lot more complicated than selecting text in a rectangular block in HTML. SVG characters can be positioned at arbitrary places with arbitrary rotations. They can follow paths, be clipped and masked and filtered. I suspect that browsers haven't put very much effort into implementing text selection in SVGs.
– Paul LeBeau
Nov 22 '18 at 6:32
3
You could consider manually creating a selection when a node is clicked on.
– Paul LeBeau
Nov 22 '18 at 6:34
Hi @PaulLeBeau how to do it by manually creating a selection?
– Yang Luo
Nov 23 '18 at 2:17
Your link said about how to select HTML text with js. But I need to select SVG label text (in d3.js). I don't know how to do it?
– Yang Luo
Nov 23 '18 at 2:20
You can select all the text in a node by double-clicking.
– Paul LeBeau
Nov 23 '18 at 4:11
|
show 1 more comment
I'm using d3.js to draw a layout graph like this one: https://bl.ocks.org/mbostock/950642
But I found that it's very difficult to copy-and-paste the node's label. Take the above link as an example, I can't drag the text to select any sequence. I can only double-click the label to select a certain char sequence.
If I try to select the text with a special char like Mlle.Vaubois, I can only get Mlle or Vaubois selected, I cannot get the whole string Mlle.Vaubois selected. (See the below picture)
Moreover, I can't select arbitrary char sequence inside that string. For example, I can't select the middle two letters: ll inside Mlle.Vaubois. The highlighting stopped right after the first l is selected. (See below:)
I just want to be able to select any sequence as I want, like in a browser. For example, I can select rce La from the HTML text: Labeled Force Layout as below. Then I can Ctrl + C and Ctrl + V as I wish.
This issue is not just for d3.js, because another more general SVG example also has this issue: http://jsfiddle.net/wPYvS/
I don't know why SVG handles text selection so different with normal HTML text in a browser or any mainstream text editor? How to solve it? Thanks.
html css html5 d3.js svg
asked Nov 22 '18 at 5:42
Yang LuoYang Luo
8561437
I'm using d3.js to draw a layout graph like this one: https://bl.ocks.org/mbostock/950642
But I found that it's very difficult to copy-and-paste the node's label. Take the above link as an example, I can't drag the text to select any sequence. I can only double-click the label to select a certain char sequence.
If I try to select the text with a special char like Mlle.Vaubois, I can only get Mlle or Vaubois selected, I cannot get the whole string Mlle.Vaubois selected. (See the below picture)
Moreover, I can't select arbitrary char sequence inside that string. For example, I can't select the middle two letters: ll inside Mlle.Vaubois. The highlighting stopped right after the first l is selected. (See below:)
I just want to be able to select any sequence as I want, like in a browser. For example, I can select rce La from the HTML text: Labeled Force Layout as below. Then I can Ctrl + C and Ctrl + V as I wish.
This issue is not just for d3.js, because another more general SVG example also has this issue: http://jsfiddle.net/wPYvS/
I don't know why SVG handles text selection so different with normal HTML text in a browser or any mainstream text editor? How to solve it? Thanks.
html css html5 d3.js svg
html css html5 d3.js svg
asked Nov 22 '18 at 5:42
Yang LuoYang Luo
8561437
asked Nov 22 '18 at 5:42
Yang LuoYang Luo
8561437
asked Nov 22 '18 at 5:42
Yang LuoYang Luo
8561437
asked Nov 22 '18 at 5:42
Yang LuoYang Luo
8561437
asked Nov 22 '18 at 5:42
Yang LuoYang Luo
8561437
8561437
3
Text selection in an SVG is a lot more complicated than selecting text in a rectangular block in HTML. SVG characters can be positioned at arbitrary places with arbitrary rotations. They can follow paths, be clipped and masked and filtered. I suspect that browsers haven't put very much effort into implementing text selection in SVGs.
– Paul LeBeau
Nov 22 '18 at 6:32
3
You could consider manually creating a selection when a node is clicked on.
– Paul LeBeau
Nov 22 '18 at 6:34
Hi @PaulLeBeau how to do it by manually creating a selection?
– Yang Luo
Nov 23 '18 at 2:17
Your link said about how to select HTML text with js. But I need to select SVG label text (in d3.js). I don't know how to do it?
– Yang Luo
Nov 23 '18 at 2:20
You can select all the text in a node by double-clicking.
– Paul LeBeau
Nov 23 '18 at 4:11
|
show 1 more comment
3
Text selection in an SVG is a lot more complicated than selecting text in a rectangular block in HTML. SVG characters can be positioned at arbitrary places with arbitrary rotations. They can follow paths, be clipped and masked and filtered. I suspect that browsers haven't put very much effort into implementing text selection in SVGs.
– Paul LeBeau
Nov 22 '18 at 6:32
3
You could consider manually creating a selection when a node is clicked on.
– Paul LeBeau
Nov 22 '18 at 6:34
Hi @PaulLeBeau how to do it by manually creating a selection?
– Yang Luo
Nov 23 '18 at 2:17
Your link said about how to select HTML text with js. But I need to select SVG label text (in d3.js). I don't know how to do it?
– Yang Luo
Nov 23 '18 at 2:20
You can select all the text in a node by double-clicking.
– Paul LeBeau
Nov 23 '18 at 4:11
3
3
Text selection in an SVG is a lot more complicated than selecting text in a rectangular block in HTML. SVG characters can be positioned at arbitrary places with arbitrary rotations. They can follow paths, be clipped and masked and filtered. I suspect that browsers haven't put very much effort into implementing text selection in SVGs.
– Paul LeBeau
Nov 22 '18 at 6:32
Text selection in an SVG is a lot more complicated than selecting text in a rectangular block in HTML. SVG characters can be positioned at arbitrary places with arbitrary rotations. They can follow paths, be clipped and masked and filtered. I suspect that browsers haven't put very much effort into implementing text selection in SVGs.
– Paul LeBeau
Nov 22 '18 at 6:32
3
3
You could consider manually creating a selection when a node is clicked on.
– Paul LeBeau
Nov 22 '18 at 6:34
You could consider manually creating a selection when a node is clicked on.
– Paul LeBeau
Nov 22 '18 at 6:34
Hi @PaulLeBeau how to do it by manually creating a selection?
– Yang Luo
Nov 23 '18 at 2:17
Hi @PaulLeBeau how to do it by manually creating a selection?
– Yang Luo
Nov 23 '18 at 2:17
Your link said about how to select HTML text with js. But I need to select SVG label text (in d3.js). I don't know how to do it?
– Yang Luo
Nov 23 '18 at 2:20
Your link said about how to select HTML text with js. But I need to select SVG label text (in d3.js). I don't know how to do it?
– Yang Luo
Nov 23 '18 at 2:20
You can select all the text in a node by double-clicking.
– Paul LeBeau
Nov 23 '18 at 4:11
You can select all the text in a node by double-clicking.
– Paul LeBeau
Nov 23 '18 at 4:11
|
show 1 more comment
1 Answer
1
active
oldest
votes
The following example adds a click handler to all the "nodes" (ie. class="node"), which will select all the text in the node.
var nodes = document.querySelectorAll(".node");
nodes.forEach( function(elem) {
elem.addEventListener("click", nodeClickHandler);
});
function nodeClickHandler(evt) {
var selection = document.getSelection();
var range = selection.getRangeAt(0);
range.selectNode(evt.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>answered Nov 23 '18 at 14:01
Paul LeBeauPaul LeBeau
56.4k56594
Thanks. This code works for static svg as in your example, but I can't succeed with it for the dynamic generated svg in js like my example?
– Yang Luo
Nov 28 '18 at 3:48
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424545%2fhow-to-cursor-select-svg-d3-js-text-just-like-normal-html-text-or-any-other-text%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The following example adds a click handler to all the "nodes" (ie. class="node"), which will select all the text in the node.
var nodes = document.querySelectorAll(".node");
nodes.forEach( function(elem) {
elem.addEventListener("click", nodeClickHandler);
});
function nodeClickHandler(evt) {
var selection = document.getSelection();
var range = selection.getRangeAt(0);
range.selectNode(evt.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>answered Nov 23 '18 at 14:01
Paul LeBeauPaul LeBeau
56.4k56594
Thanks. This code works for static svg as in your example, but I can't succeed with it for the dynamic generated svg in js like my example?
– Yang Luo
Nov 28 '18 at 3:48
add a comment |
The following example adds a click handler to all the "nodes" (ie. class="node"), which will select all the text in the node.
var nodes = document.querySelectorAll(".node");
nodes.forEach( function(elem) {
elem.addEventListener("click", nodeClickHandler);
});
function nodeClickHandler(evt) {
var selection = document.getSelection();
var range = selection.getRangeAt(0);
range.selectNode(evt.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>answered Nov 23 '18 at 14:01
Paul LeBeauPaul LeBeau
56.4k56594
Thanks. This code works for static svg as in your example, but I can't succeed with it for the dynamic generated svg in js like my example?
– Yang Luo
Nov 28 '18 at 3:48
add a comment |
The following example adds a click handler to all the "nodes" (ie. class="node"), which will select all the text in the node.
var nodes = document.querySelectorAll(".node");
nodes.forEach( function(elem) {
elem.addEventListener("click", nodeClickHandler);
});
function nodeClickHandler(evt) {
var selection = document.getSelection();
var range = selection.getRangeAt(0);
range.selectNode(evt.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>answered Nov 23 '18 at 14:01
Paul LeBeauPaul LeBeau
56.4k56594
The following example adds a click handler to all the "nodes" (ie. class="node"), which will select all the text in the node.
var nodes = document.querySelectorAll(".node");
nodes.forEach( function(elem) {
elem.addEventListener("click", nodeClickHandler);
});
function nodeClickHandler(evt) {
var selection = document.getSelection();
var range = selection.getRangeAt(0);
range.selectNode(evt.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>var nodes = document.querySelectorAll(".node");
nodes.forEach( function(elem) {
elem.addEventListener("click", nodeClickHandler);
});
function nodeClickHandler(evt) {
var selection = document.getSelection();
var range = selection.getRangeAt(0);
range.selectNode(evt.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>var nodes = document.querySelectorAll(".node");
nodes.forEach( function(elem) {
elem.addEventListener("click", nodeClickHandler);
});
function nodeClickHandler(evt) {
var selection = document.getSelection();
var range = selection.getRangeAt(0);
range.selectNode(evt.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>answered Nov 23 '18 at 14:01
Paul LeBeauPaul LeBeau
56.4k56594
answered Nov 23 '18 at 14:01
Paul LeBeauPaul LeBeau
56.4k56594
answered Nov 23 '18 at 14:01
Paul LeBeauPaul LeBeau
56.4k56594
answered Nov 23 '18 at 14:01
Paul LeBeauPaul LeBeau
56.4k56594
56.4k56594
Thanks. This code works for static svg as in your example, but I can't succeed with it for the dynamic generated svg in js like my example?
– Yang Luo
Nov 28 '18 at 3:48
add a comment |
Thanks. This code works for static svg as in your example, but I can't succeed with it for the dynamic generated svg in js like my example?
– Yang Luo
Nov 28 '18 at 3:48
Thanks. This code works for static svg as in your example, but I can't succeed with it for the dynamic generated svg in js like my example?
– Yang Luo
Nov 28 '18 at 3:48
Thanks. This code works for static svg as in your example, but I can't succeed with it for the dynamic generated svg in js like my example?
– Yang Luo
Nov 28 '18 at 3:48
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424545%2fhow-to-cursor-select-svg-d3-js-text-just-like-normal-html-text-or-any-other-text%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
Text selection in an SVG is a lot more complicated than selecting text in a rectangular block in HTML. SVG characters can be positioned at arbitrary places with arbitrary rotations. They can follow paths, be clipped and masked and filtered. I suspect that browsers haven't put very much effort into implementing text selection in SVGs.
– Paul LeBeau
Nov 22 '18 at 6:32
3
You could consider manually creating a selection when a node is clicked on.
– Paul LeBeau
Nov 22 '18 at 6:34
Hi @PaulLeBeau how to do it by manually creating a selection?
– Yang Luo
Nov 23 '18 at 2:17
Your link said about how to select HTML text with js. But I need to select SVG label text (in d3.js). I don't know how to do it?
– Yang Luo
Nov 23 '18 at 2:20
You can select all the text in a node by double-clicking.
– Paul LeBeau
Nov 23 '18 at 4:11