appending group not working. have created group , appended rectangle , circle. can see rectangle not able see circle on screen. however, checking elements in console showing circle dom.
demo: http://jsbin.com/gebivavuxi/1/edit?html,js,output
<!doctype html> <html> <head> <title>editor</title> <meta http-equiv="x-ua-compatible" content="ie=9"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <link rel="stylesheet" href="<%=request.getcontextpath()%>/style.css" /> <script type="text/javascript"> window.onload = function () { var svgcontainer = d3.select("body").append("svg") .attr("width", 800) .attr("height", 803); var group = svgcontainer.append("g") .append("rect") .attr("x", 250) .attr("y", 250) .attr("width", 351) .attr("height", 241) .attr("rx", 10) .attr("stroke-width", 2) .attr("stroke", "#7e7e7e") .style("fill", "none"); group.append("circle") .attr("cx", 10) .attr("cy", 10) .attr("r", 25) .style("fill", "red") .style("stroke-width", 2) .style("stroke", "#cdb483"); }; </script> </head> <body> <div id="container"> <div id="header" style="margin-bottom: 0;"> <h1 id="title">editor</h1> <div id="footer"></div> </div> </div> </body> </html>
the way code written, group variable referring rect element. change part of code:
var group = svgcontainer.append("g") .append("rect") ... to:
var group = svgcontainer.append("g"); group .append("rect") ... in order assign g element group variable , append rect , circle g element.
Comments
Post a Comment