d3js学习——4.svg

SVG 代表 scalable vector graphics，是一种基于 XML 的矢量图形格式，提供了绘制不同形状的选项：直线、矩形、圆形、椭圆等。

SVG的显著特征：

• SVG是基于矢量的图像格式，它是基于文本的。
• SVG在结构上与HTML类似。
• SVG可以表示为Document object model 。
• 可以将SVG属性指定为属性。
• SVG应该具有相对于原点（0,0）的绝对位置。
• SVG可以包含在HTML文档中。

svg 格式的默认单位的 Pixel.

直线-line

• x1 - 这是第一个点的x坐标。
• y1 - 这是第一个点的y坐标。
• x2 - 这是第二个点的x坐标。
• y2 - 这是第二个点的y坐标。
• stroke - 线条的颜色。
• stroke-width - 线的粗细。

<!-- 一条从(100,100)=>(200,200)的红色直线 -->
<svg width="500" height="500">
  <line
    x1="100"
    x2="200"
    y1="100"
    y2="200"
    style="stroke: brown; stroke-width: 2"
  ></line>
</svg>

<div id="svgcontainer"></div>

var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
   .append("svg").attr("width", width).attr("height", height)
srv.append("line")
   .attr("x1", 100)
   .attr("y1", 100)
   .attr("x2", 200) 
   .attr("y2", 200)
   .style("stroke", "rgb(255,0,0)")
   .style("stroke-width", 2);

矩形-rect

• x - 这是矩形左上角的x坐标。
• y - 这是矩形左上角的y坐标。
• width - 这表示矩形的宽度。
• height - 表示矩形的高度。
• fill - 表示矩形的颜色。

let svg = d3
    .select(".rec")
    .append("svg")
    .attr("width", 500)
    .attr("height", 500);
svg
    .append("rect")
    .attr("x", 10)
    .attr("y", 10)
    .attr("width", 200)
    .attr("height", 100)
    .attr("fill", "green");

圆元素-circle

• cx - 这是圆心的x坐标。
• cy - 这是圆心的y坐标。
• r - 这表示圆的半径。

svg
    .append("circle")
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 50)
    .attr("fill", "red");

椭圆-ellipse

• cx - 这是椭圆中心的x坐标。
• cy - 这是椭圆中心的y坐标。
• rx - 这是圆的x半径。
• ry - 这是圆的y半径。

svg
    .append("ellipse")
    .attr("cx", 200)
    .attr("cy", 50)
    .attr("rx", 100)
    .attr("ry", 50)
    .attr("fill", "yellow");