D3 Examples - transform, translate example

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .dot {fill: IndianRed; stroke: LimeGreen; stroke-width: 3px}
    .dot:hover {r: 12; stroke-width: 5px}
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
var holder = d3.select("body")
    .append("svg")
    .attr("width",450)
    .attr("height",400);
   
holder.append("ellipse")
    .attr("cx",200)
    .attr("cy",200)
    .attr("class","dot")
    .attr("rx",100)
  .attr("ry",125)
    .attr("transform","translate(50,100)")
​
    
holder.append("polyline")
    .style("fill","none")
    .style("stroke","MidnightBlue")
    .attr("points"," 200,50, 200,400");
​
holder.append("polyline")
    .style("fill","none")
    .style("stroke","MidnightBlue")
    .attr("points"," 50,200, 400,200");
  </script>
</body>
​
    