[D3] D3 and SVG Basic Shapes

SVG Basic Shapes

  • Rectangle

    <rect x="0" y="0" width="50" height="50" />
  • Circle

    <circle cx="0" cy="0" r="25" />
  • Ellipse

    <ellipse cx="25" cy="25" rx="15" ry="20" />
  • Straight Line

    <line x1="5" y1="5" x2="40" y2="40" stroke="gray" stroke-width="5" />
  • Polyline, Polygon, Path

範例(Rectangle):

var svgContainer = d3.select("body").append("svg").attr("width", "200"), attr("height", "200");
var rectangles = [{ "x":   0, "y":  0,  "width": 30, "height": 40},
                  { "x":  50, "y": 50,  "width": 30, "height": 40},
                  { "x": 100, "y": 100, "width": 30, "height": 40}];

var svgRectangles = svgContainer.selectAll("rect").data(rectangles).enter().append("rect");

svgRectangles.attr("x", function(d, i){ return d.x; });
svgRectangles.attr("y", function(d, i){ return d.y; });
svgRectangles.attr("width", function(d, i){ return d.width; });
svgRectangles.attr("height", function(d, i){ return d.height; });

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of