renx777
10/24/2017 - 3:31 PM

svg shapes using d3

svg shapes using d3

jsbin.pakijof.js
content_copyfile_download
var canvas=d3.select('body')
              .append('svg')
              .attr('width',500)
              .attr('height',500)
               .attr("fill","grey");
             

var circle=canvas.append('circle')
                 .attr('cx',200)
                 .attr('cy',250)
                 .attr("r",50)
                 .attr('fill',"red");

var rect=canvas.append('rect')
                .attr('width',50).attr('height',50).attr('fill',"lightblue")
                 .attr('x',50).attr('y',30);

var line=canvas.append('line')
                .attr({"x1":0,"y1":200,"x2":500,"y2":100,"stroke":"green"})
jsbin.pakijof.css
content_copyfile_download
svg{
  background-color:antiquewhite;
}
index.html
content_copyfile_download
<head>
<meta name="description" content="[d3 basic shapes]">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
  
<style id="jsbin-css">
svg{
  background-color:antiquewhite;
}
</style>
</head>

<body>
  <h2>iam invincible</h2>
<script id="jsbin-javascript">
var canvas=d3.select('body')
              .append('svg')
              .attr('width',500)
              .attr('height',500)
               .attr("fill","grey");
             

var circle=canvas.append('circle')
                 .attr('cx',200)
                 .attr('cy',250)
                 .attr("r",50)
                 .attr('fill',"red");

var rect=canvas.append('rect')
                .attr('width',50).attr('height',50).attr('fill',"lightblue")
                 .attr('x',50).attr('y',30);

var line=canvas.append('line')
                .attr({"x1":0,"y1":200,"x2":500,"y2":100,"stroke":"green"})
</script>



<script id="jsbin-source-javascript" type="text/javascript">var canvas=d3.select('body')
              .append('svg')
              .attr('width',500)
              .attr('height',500)
               .attr("fill","grey");
             

var circle=canvas.append('circle')
                 .attr('cx',200)
                 .attr('cy',250)
                 .attr("r",50)
                 .attr('fill',"red");

var rect=canvas.append('rect')
                .attr('width',50).attr('height',50).attr('fill',"lightblue")
                 .attr('x',50).attr('y',30);

var line=canvas.append('line')
                .attr({"x1":0,"y1":200,"x2":500,"y2":100,"stroke":"green"})</script></body>