d3 circles in the centre of rectangles
592 views
Skip to first unread message
Saiful Khan
Nov 11, 2014, 7:35:11 PM11/11/14
to d3...@googlegroups.com
Sorry to ask a trivial question. I am trying to draw some rectangles (treemap) from json file and overlay a circle on the centre of each rectangle. I am also trying to label the rectangles. The console shows correct values, But, the text is not visible & the circles are not in the centre of each rectangle (attached image). The This is a very simple task and I am new to d3. Can you please help me to correct the mistake I am doing?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> Treemap </title>
<script type="text/javascript" src="../d3/d3.v3.js"></script>
</head>
<body>
<script>
var jsondata = [
{
"name" : "Middle East",
"size" : 861482,
"x" : 18,
"y" : 18,
"width" : 415.57094333304099,
"height" : 484
},
{
"name" : "Australasia",
"size" : 80696,
"x" : 433.57094333304099,
"y" : 226.66857473176645,
"width" : 68.429056666959013,
"height" : 275.33142526823355
},
{
"name" : "Europe",
"size" : 61158,
"x" : 433.57094333304099,
"y" : 18,
"width" : 68.429056666959013,
"height" : 208.66857473176645
}
];
var svgContainer = d3.select("body").append("svg")
.attr("width", 1000)
.attr("height", 1000);
//var svgContainer = svg.append("g").attr("transform", "translate(0, 0)");
var rectangles = svgContainer.selectAll("rect")
.data(jsondata)
.enter()
.append("rect");
var rect = rectangles.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
.attr("width", function (d) { return d.width; })
.attr("height", function (d) { return d.height; })
.style("fill", "green")
.style("stroke", "white")
.style("stroke-width", "0.5")
.style("z-index", "1");
rect.append("text")
.attr("x", function(d) { return d.x + 2; })
.attr("y", function(d) { return d.y + 2; })
.attr("dy", ".35em")
.text(function(d) { return d.name; })
.style("font-family", "Verdana")
.style("font-size", "18")
.style("fill", "black")
.style("z-index", "2");
var dots = svgContainer.selectAll("circle")
.data(jsondata)
.enter()
.append("circle");
var dot = dots.attr("cx", function (d) { return (d.x + d.width) / 2 ; })
.attr("cy", function (d) { return (d.y + d.height) / 2 ; })
.attr("r", "5")
.style("fill", "white");
//.style("z-index", "3");
</script>
</body>
</html>
Max Goldstein
Nov 11, 2014, 9:00:12 PM11/11/14
to d3...@googlegroups.com
I fixed your code. The circles were not in the correct place because you were dividing d.x and d.y by two; you only want to halve the width and height. The text wasn't showing up because it was the child of a rect, rather than a sibling. You should hang on to the update or enter selection (here called rectangles) and append to that multiple times.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> Treemap </title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
rectangles.append("rect")
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
.attr("width", function (d) { return d.width; })
.attr("height", function (d) { return d.height; })
.style("fill", "green")
.style("stroke", "white")
.style("stroke-width", "0.5")
.style("z-index", "1");
rectangles.append("text")
.attr("x", function(d) { return d.x + 2; })
.attr("y", function(d) { return d.y + 2; })
.attr("dy", ".35em")
.text(function(d) { return d.name; })
.style("font-family", "Verdana")
.style("font-size", "18")
.style("fill", "black")
.style("z-index", "2");
rectangles.append("circle")
.attr("cx", function (d) { return d.x + d.width / 2 ; })
.attr("cy", function (d) { return d.y + d.height / 2 ; })
Reply all
Reply to author
Forward
0 new messages