Cannot get svg image from d3.xml() function: always get an errorHow to get the value from the GET parameters?Get selected text from a drop-down list (select box) using jQueryHow to convert a PNG image to a SVG?Convert SVG to image (JPEG, PNG, etc.) in the browserIn Node.js, how do I “include” functions from my other files?How to convert a SVG to a PNG with ImageMagick?jQuery Get Selected Option From DropdownHow to change color of SVG image using CSS (jQuery SVG image replacement)?How to pretty print XML from the command line?IE SVG4601 Error with SVG as data URL
Can the Warforged Integrated Weapon Trait be Disarmed?
Improbable Inequalities
Does the word “uzi” need to be capitalized?
Does the mana ability restriction of Pithing Needle refer to the cost or the effect of an activated ability?
Is English tonal for some words, like "permit"?
How should we understand "unobscured by flying friends" in this context?
Why should I always enable compiler warnings?
Can board a plane to Cameroon without a Cameroonian visa?
Number of aircraft to operate in an airline company
On the origin of "casa"
Two different colors in an Illustrator stroke / line
How flexible are number-of-pages submission guidelines for conferences?
What causes this bloom with an old telephoto lens?
Webpage with a preload animation using JavaScript setTimeout
Which ping implementation is cygwin using?
Are scroll bars dead in 2019?
Is there a sentence that begins with “them”?
What is this dollar sign ($) icon in my Menu Bar?
Why would thermal imaging be used to locate the Chandrayaan-2 lander?
Is there a star over my head?
How was Carlo's plan supposed to work?
Are Democrats more likely to believe Astrology is a science?
Have there been any countries that voted themselves out of existence?
What is negative current?
Cannot get svg image from d3.xml() function: always get an error
How to get the value from the GET parameters?Get selected text from a drop-down list (select box) using jQueryHow to convert a PNG image to a SVG?Convert SVG to image (JPEG, PNG, etc.) in the browserIn Node.js, how do I “include” functions from my other files?How to convert a SVG to a PNG with ImageMagick?jQuery Get Selected Option From DropdownHow to change color of SVG image using CSS (jQuery SVG image replacement)?How to pretty print XML from the command line?IE SVG4601 Error with SVG as data URL
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I am using D3.js library version 5.9.2 installed via npm
I am trying to load an .svg file via d3.xml() function like described in this example: https://fabiofranchino.com/blog/how-to-inject-external-svg-with-d3/
From this article I figured out that is is possible to inject an SVG inside of another SVG and have them in a "nested" way.
My code looks like this:
import * as d3 from "d3";
function drawSVG(data)
// list of constants
const height = window.innerHeight;
const width = window.innerWidth;
d3.xml("https://s.cdpn.io/3/kiwi.svg")
.then(data =>
d3.select("body").node().append(data.documentElement);
)
.catch(e =>
console.log("no data detected", e);
);
drawSVG();<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>I always get the same error which is:
"error on line 19 at column 10: Opening and ending tag mismatch: meta line 0 and head"
I have tried it with multiple images (both from the external URLS and local files )
It seems like the SVG files themselves are fine. Can anybody help me figure out what exactly is wrong and how can I load an svg file with D3?
javascript xml d3.js svg
asked Mar 28 at 7:54
margaritamargarita
5976 silver badges17 bronze badges
add a comment |
I am using D3.js library version 5.9.2 installed via npm
I am trying to load an .svg file via d3.xml() function like described in this example: https://fabiofranchino.com/blog/how-to-inject-external-svg-with-d3/
From this article I figured out that is is possible to inject an SVG inside of another SVG and have them in a "nested" way.
My code looks like this:
import * as d3 from "d3";
function drawSVG(data)
// list of constants
const height = window.innerHeight;
const width = window.innerWidth;
d3.xml("https://s.cdpn.io/3/kiwi.svg")
.then(data =>
d3.select("body").node().append(data.documentElement);
)
.catch(e =>
console.log("no data detected", e);
);
drawSVG();<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>I always get the same error which is:
"error on line 19 at column 10: Opening and ending tag mismatch: meta line 0 and head"
I have tried it with multiple images (both from the external URLS and local files )
It seems like the SVG files themselves are fine. Can anybody help me figure out what exactly is wrong and how can I load an svg file with D3?
javascript xml d3.js svg
asked Mar 28 at 7:54
margaritamargarita
5976 silver badges17 bronze badges
1
There is no meaningfull way to look at your question: your code example does not match your question (no nested SVG, wrong d3 version), it is not executable (unexecutableimportstatement), the linked SVG file cannot be loaded because it raises a CORS error, the picture of the error message makes no sense (There seems to be an attempt to load a HTML page, but the failed attempt is hidden in the folded<head>...</head>part of the DOM tree). Please try post a minimal reproducible example.
– ccprog
Mar 28 at 18:09
add a comment |
I am using D3.js library version 5.9.2 installed via npm
I am trying to load an .svg file via d3.xml() function like described in this example: https://fabiofranchino.com/blog/how-to-inject-external-svg-with-d3/
From this article I figured out that is is possible to inject an SVG inside of another SVG and have them in a "nested" way.
My code looks like this:
import * as d3 from "d3";
function drawSVG(data)
// list of constants
const height = window.innerHeight;
const width = window.innerWidth;
d3.xml("https://s.cdpn.io/3/kiwi.svg")
.then(data =>
d3.select("body").node().append(data.documentElement);
)
.catch(e =>
console.log("no data detected", e);
);
drawSVG();<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>I always get the same error which is:
"error on line 19 at column 10: Opening and ending tag mismatch: meta line 0 and head"
I have tried it with multiple images (both from the external URLS and local files )
It seems like the SVG files themselves are fine. Can anybody help me figure out what exactly is wrong and how can I load an svg file with D3?
javascript xml d3.js svg
asked Mar 28 at 7:54
margaritamargarita
5976 silver badges17 bronze badges
I am using D3.js library version 5.9.2 installed via npm
I am trying to load an .svg file via d3.xml() function like described in this example: https://fabiofranchino.com/blog/how-to-inject-external-svg-with-d3/
From this article I figured out that is is possible to inject an SVG inside of another SVG and have them in a "nested" way.
My code looks like this:
import * as d3 from "d3";
function drawSVG(data)
// list of constants
const height = window.innerHeight;
const width = window.innerWidth;
d3.xml("https://s.cdpn.io/3/kiwi.svg")
.then(data =>
d3.select("body").node().append(data.documentElement);
)
.catch(e =>
console.log("no data detected", e);
);
drawSVG();<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>I always get the same error which is:
"error on line 19 at column 10: Opening and ending tag mismatch: meta line 0 and head"
I have tried it with multiple images (both from the external URLS and local files )
It seems like the SVG files themselves are fine. Can anybody help me figure out what exactly is wrong and how can I load an svg file with D3?
import * as d3 from "d3";
function drawSVG(data)
// list of constants
const height = window.innerHeight;
const width = window.innerWidth;
d3.xml("https://s.cdpn.io/3/kiwi.svg")
.then(data =>
d3.select("body").node().append(data.documentElement);
)
.catch(e =>
console.log("no data detected", e);
);
drawSVG();<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>import * as d3 from "d3";
function drawSVG(data)
// list of constants
const height = window.innerHeight;
const width = window.innerWidth;
d3.xml("https://s.cdpn.io/3/kiwi.svg")
.then(data =>
d3.select("body").node().append(data.documentElement);
)
.catch(e =>
console.log("no data detected", e);
);
drawSVG();<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>javascript xml d3.js svg
javascript xml d3.js svg
asked Mar 28 at 7:54
margaritamargarita
5976 silver badges17 bronze badges
asked Mar 28 at 7:54
margaritamargarita
5976 silver badges17 bronze badges
asked Mar 28 at 7:54
margaritamargarita
5976 silver badges17 bronze badges
asked Mar 28 at 7:54
margaritamargarita
5976 silver badges17 bronze badges
asked Mar 28 at 7:54
margaritamargarita
5976 silver badges17 bronze badges
5976 silver badges17 bronze badges
1
There is no meaningfull way to look at your question: your code example does not match your question (no nested SVG, wrong d3 version), it is not executable (unexecutableimportstatement), the linked SVG file cannot be loaded because it raises a CORS error, the picture of the error message makes no sense (There seems to be an attempt to load a HTML page, but the failed attempt is hidden in the folded<head>...</head>part of the DOM tree). Please try post a minimal reproducible example.
– ccprog
Mar 28 at 18:09
add a comment |
1
There is no meaningfull way to look at your question: your code example does not match your question (no nested SVG, wrong d3 version), it is not executable (unexecutableimportstatement), the linked SVG file cannot be loaded because it raises a CORS error, the picture of the error message makes no sense (There seems to be an attempt to load a HTML page, but the failed attempt is hidden in the folded<head>...</head>part of the DOM tree). Please try post a minimal reproducible example.
– ccprog
Mar 28 at 18:09
1
1
There is no meaningfull way to look at your question: your code example does not match your question (no nested SVG, wrong d3 version), it is not executable (unexecutable
import statement), the linked SVG file cannot be loaded because it raises a CORS error, the picture of the error message makes no sense (There seems to be an attempt to load a HTML page, but the failed attempt is hidden in the folded <head>...</head> part of the DOM tree). Please try post a minimal reproducible example.– ccprog
Mar 28 at 18:09
There is no meaningfull way to look at your question: your code example does not match your question (no nested SVG, wrong d3 version), it is not executable (unexecutable
import statement), the linked SVG file cannot be loaded because it raises a CORS error, the picture of the error message makes no sense (There seems to be an attempt to load a HTML page, but the failed attempt is hidden in the folded <head>...</head> part of the DOM tree). Please try post a minimal reproducible example.– ccprog
Mar 28 at 18:09
add a comment |
0
active
oldest
votes
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/4.0/"u003ecc by-sa 4.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%2f55392568%2fcannot-get-svg-image-from-d3-xml-function-always-get-an-error%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Is this question similar to what you get asked at work? Learn more about asking and sharing private information with your coworkers using Stack Overflow for Teams.
Is this question similar to what you get asked at work? Learn more about asking and sharing private information with your coworkers using Stack Overflow for Teams.
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%2f55392568%2fcannot-get-svg-image-from-d3-xml-function-always-get-an-error%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
1
There is no meaningfull way to look at your question: your code example does not match your question (no nested SVG, wrong d3 version), it is not executable (unexecutable
importstatement), the linked SVG file cannot be loaded because it raises a CORS error, the picture of the error message makes no sense (There seems to be an attempt to load a HTML page, but the failed attempt is hidden in the folded<head>...</head>part of the DOM tree). Please try post a minimal reproducible example.– ccprog
Mar 28 at 18:09