Mixing
circles not displaying on svg as per dataset
I am very new to D3, I am just trying to create circles according a very small 2 dimension, 4 element array, initialized in code , below, but only one circle is displayed. not sure why? if anyone can help to point out what is the problem?
one note: array elements d.x and d.y are carrying data elements. I have verified in console.log(d.x) and console.log(d.y):
// below is index.js file
//this is array
const myArr = [{x: 100 , y: 100},
{x: 130 , y: 150},
{x: 77 , y: 120},
{x: 90 , y: 49}];
const svg = d3.select("body").append("svg")
.attr("height" , 200)
.attr("width" , 350);
below is the code to handle svg selection , enter , update
const circles = svg.selectAll("circle").data(myArr);
//enter
circles.enter().append("circle")
.attr("r" , 8);
//.attr("fill", "#00aa88");
//update
circles.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; });
svg.selectAll("text")
.data(myArr)
.enter()
.append("text")
.text(function (d) {
return d.x + "," + d.y;
})
.attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y;
})
.attr("font-size", "15px")
.attr("fill", "white");
//exit
circles.exit().remove();
this code displays on one circle. i have not added any axes yet.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v5.js" type="text/javascript"></script>
<title>Practise</title>
</head>
<body>
<h2>PRACTICE</h2>
<circle></circle>
</body>
</html>
<script src="index.js"></script>
one more quesiton, if i call this index.js in head code does not work , it only works if i call this script file at very bottom of index.html. if anyone can help why is this and how to fix it?
svg display
edited Jan 1 at 5:46
Nicholas K
7,39161537
asked Jan 1 at 4:59
Nadia SiddiquiNadia Siddiqui
61
add a comment |
I am very new to D3, I am just trying to create circles according a very small 2 dimension, 4 element array, initialized in code , below, but only one circle is displayed. not sure why? if anyone can help to point out what is the problem?
one note: array elements d.x and d.y are carrying data elements. I have verified in console.log(d.x) and console.log(d.y):
// below is index.js file
//this is array
const myArr = [{x: 100 , y: 100},
{x: 130 , y: 150},
{x: 77 , y: 120},
{x: 90 , y: 49}];
const svg = d3.select("body").append("svg")
.attr("height" , 200)
.attr("width" , 350);
below is the code to handle svg selection , enter , update
const circles = svg.selectAll("circle").data(myArr);
//enter
circles.enter().append("circle")
.attr("r" , 8);
//.attr("fill", "#00aa88");
//update
circles.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; });
svg.selectAll("text")
.data(myArr)
.enter()
.append("text")
.text(function (d) {
return d.x + "," + d.y;
})
.attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y;
})
.attr("font-size", "15px")
.attr("fill", "white");
//exit
circles.exit().remove();
this code displays on one circle. i have not added any axes yet.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v5.js" type="text/javascript"></script>
<title>Practise</title>
</head>
<body>
<h2>PRACTICE</h2>
<circle></circle>
</body>
</html>
<script src="index.js"></script>
one more quesiton, if i call this index.js in head code does not work , it only works if i call this script file at very bottom of index.html. if anyone can help why is this and how to fix it?
svg display
edited Jan 1 at 5:46
Nicholas K
7,39161537
asked Jan 1 at 4:59
Nadia SiddiquiNadia Siddiqui
61
1
Your circles have a radius but not acxand/orcy, as a consequence all your circles are drawn with the center in the origin of the SVG canvas (left upper corner). Besides in tour HTML you have a<circle>element. A<circle>element should be always drawn in a<svg>element
– enxaneta
Jan 1 at 8:00
add a comment |
I am very new to D3, I am just trying to create circles according a very small 2 dimension, 4 element array, initialized in code , below, but only one circle is displayed. not sure why? if anyone can help to point out what is the problem?
one note: array elements d.x and d.y are carrying data elements. I have verified in console.log(d.x) and console.log(d.y):
// below is index.js file
//this is array
const myArr = [{x: 100 , y: 100},
{x: 130 , y: 150},
{x: 77 , y: 120},
{x: 90 , y: 49}];
const svg = d3.select("body").append("svg")
.attr("height" , 200)
.attr("width" , 350);
below is the code to handle svg selection , enter , update
const circles = svg.selectAll("circle").data(myArr);
//enter
circles.enter().append("circle")
.attr("r" , 8);
//.attr("fill", "#00aa88");
//update
circles.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; });
svg.selectAll("text")
.data(myArr)
.enter()
.append("text")
.text(function (d) {
return d.x + "," + d.y;
})
.attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y;
})
.attr("font-size", "15px")
.attr("fill", "white");
//exit
circles.exit().remove();
this code displays on one circle. i have not added any axes yet.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v5.js" type="text/javascript"></script>
<title>Practise</title>
</head>
<body>
<h2>PRACTICE</h2>
<circle></circle>
</body>
</html>
<script src="index.js"></script>
one more quesiton, if i call this index.js in head code does not work , it only works if i call this script file at very bottom of index.html. if anyone can help why is this and how to fix it?
svg display
edited Jan 1 at 5:46
Nicholas K
7,39161537
asked Jan 1 at 4:59
Nadia SiddiquiNadia Siddiqui
61
I am very new to D3, I am just trying to create circles according a very small 2 dimension, 4 element array, initialized in code , below, but only one circle is displayed. not sure why? if anyone can help to point out what is the problem?
one note: array elements d.x and d.y are carrying data elements. I have verified in console.log(d.x) and console.log(d.y):
// below is index.js file
//this is array
const myArr = [{x: 100 , y: 100},
{x: 130 , y: 150},
{x: 77 , y: 120},
{x: 90 , y: 49}];
const svg = d3.select("body").append("svg")
.attr("height" , 200)
.attr("width" , 350);
below is the code to handle svg selection , enter , update
const circles = svg.selectAll("circle").data(myArr);
//enter
circles.enter().append("circle")
.attr("r" , 8);
//.attr("fill", "#00aa88");
//update
circles.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; });
svg.selectAll("text")
.data(myArr)
.enter()
.append("text")
.text(function (d) {
return d.x + "," + d.y;
})
.attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y;
})
.attr("font-size", "15px")
.attr("fill", "white");
//exit
circles.exit().remove();
this code displays on one circle. i have not added any axes yet.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v5.js" type="text/javascript"></script>
<title>Practise</title>
</head>
<body>
<h2>PRACTICE</h2>
<circle></circle>
</body>
</html>
<script src="index.js"></script>
one more quesiton, if i call this index.js in head code does not work , it only works if i call this script file at very bottom of index.html. if anyone can help why is this and how to fix it?
svg display
svg display
edited Jan 1 at 5:46
Nicholas K
7,39161537
asked Jan 1 at 4:59
Nadia SiddiquiNadia Siddiqui
61
edited Jan 1 at 5:46
Nicholas K
7,39161537
asked Jan 1 at 4:59
Nadia SiddiquiNadia Siddiqui
61
edited Jan 1 at 5:46
Nicholas K
7,39161537
edited Jan 1 at 5:46
Nicholas K
7,39161537
edited Jan 1 at 5:46
Nicholas K
7,39161537
7,39161537
asked Jan 1 at 4:59
Nadia SiddiquiNadia Siddiqui
61
asked Jan 1 at 4:59
Nadia SiddiquiNadia Siddiqui
61
asked Jan 1 at 4:59
Nadia SiddiquiNadia Siddiqui
61
61
1
Your circles have a radius but not acxand/orcy, as a consequence all your circles are drawn with the center in the origin of the SVG canvas (left upper corner). Besides in tour HTML you have a<circle>element. A<circle>element should be always drawn in a<svg>element
– enxaneta
Jan 1 at 8:00
add a comment |
1
Your circles have a radius but not acxand/orcy, as a consequence all your circles are drawn with the center in the origin of the SVG canvas (left upper corner). Besides in tour HTML you have a<circle>element. A<circle>element should be always drawn in a<svg>element
– enxaneta
Jan 1 at 8:00
1
1
Your circles have a radius but not a
cx and/or cy, as a consequence all your circles are drawn with the center in the origin of the SVG canvas (left upper corner). Besides in tour HTML you have a <circle> element. A <circle> element should be always drawn in a <svg> element– enxaneta
Jan 1 at 8:00
Your circles have a radius but not a
cx and/or cy, as a consequence all your circles are drawn with the center in the origin of the SVG canvas (left upper corner). Besides in tour HTML you have a <circle> element. A <circle> element should be always drawn in a <svg> element– enxaneta
Jan 1 at 8:00
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/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%2f53993105%2fcircles-not-displaying-on-svg-as-per-dataset%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
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%2f53993105%2fcircles-not-displaying-on-svg-as-per-dataset%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
Your circles have a radius but not a
cxand/orcy, as a consequence all your circles are drawn with the center in the origin of the SVG canvas (left upper corner). Besides in tour HTML you have a<circle>element. A<circle>element should be always drawn in a<svg>element– enxaneta
Jan 1 at 8:00