JavaScript (120) SVG (3) 数据可视化 (22)

算法

打家劫舍

你是一个专业的小偷，计划偷窃沿街的房屋。每间房内都藏有一定的现金，影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统，如果两间相邻的房屋在同一晚上被小偷闯入，系统会自动报警。

给定一个代表每个房屋存放金额的非负整数数组，计算你在不触动警报装置的情况下，能够偷窃到的最高金额。

示例 1:

输入: [1,2,3,1]
输出: 4
解释: 偷窃 1 号房屋 (金额 = 1) ，然后偷窃 3 号房屋 (金额 = 3)。
     偷窃到的最高金额 = 1 + 3 = 4 。

迭代的方式

var rob = function(nums) {
    let last = 0;
    let total = 0;
    for(let i=0; i<nums.length; i++){
        var temp = last;
        last = total;
        total = Math.max(temp + nums[i], last);
    }
    return total;
};

递归的解法

var rob = function(nums) {
    var cacheRes = {};
    function robInfo(i){
        if(i < 0) return 0;
        if(i === 0) return nums[0];
        if(!cacheRes[i]){
            if(i === 1){
                cacheRes[i] = Math.max(nums[0], nums[1]);
            }else{
                cacheRes[i] = Math.max(nums[i] + robInfo(i - 2), nums[i - 1] + robInfo(i - 3))
            }
        }
        return cacheRes[i]
    }
    return robInfo(nums.length - 1);
};

SVG

什么是 SVG

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

使用方式

可以用一些外链的方式引入，也可以是一些在 HTML 中直接写。svg 也能允许嵌套

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     >
    <circle cx="64" cy="64" r="64" style="fill: #00ccff;"></circle>
</svg>

上图如果没有 viewbox，会根据 svg 元素的宽高来固定画布，内部的大小由实际大小决定，如果要进行同比缩放，就可以设定 viewbox，相当于设定画布的大小，这个时候再设定 svg 的宽高，就会根据 svg 的款高和 viewbox 的宽高进行等比缩放

SVG 坐标系

左上角为原点，右为 x 正向，下为 y 正向。如果没有指定单位，那么单位为像素，可以指定 cm 和 mm 的单位。

Unit  Description
em    The default font size - usually the height of a character.
ex    The height of the character x
px    Pixels
pt    Points (1 / 72 of an inch)
pc    Picas (1 / 6 of an inch)
cm    Centimeters
mm    Millimeters
in    Inches

g 元素

SVG中g元素被用来将图形进行分组。一旦分组，你可以把它当作一个单一的形状，对整个图形组进行转换。与嵌套的svg元素相比，将元素作为整体转换是它的一个优点。

g元素的样式由它的子元素继承，但是G元素没有X和Y属性

SVG 形状

SVG 有一些预定义的形状元素，可被开发者使用和操作：

• 矩形
• 圆形
• 椭圆
• 线
• 折线
• 多边形
• 路径

SVG 矩形 rect

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

属性

• rect 元素的 width 和 height 属性可定义矩形的高度和宽度
• x 属性定义矩形的左侧位置（例如，x=”0” 定义矩形到浏览器窗口左侧的距离是 0px）
• y 属性定义矩形的顶端位置（例如，y=”0” 定义矩形到浏览器窗口顶端的距离是 0px）
• rx 和 ry 属性可使矩形产生圆角。
• style 属性用来定义 CSS 属性
  • CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
  • CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
  • CSS 的 stroke-width 属性定义矩形边框的宽度
  • CSS 的 stroke 属性定义矩形边框的颜色
  • CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
  • CSS stroke-dasharray 属性是虚线
  • CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
  • CSS transform 形变

SVG 圆 circle

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>

属性

• cx,cy 为圆心坐标
• r 为半径
• style 属性用来定义 CSS 属性
  • stroke 边框的颜色
  • stroke-width样式属性设置边框的宽度
  • stroke-dasharray属性将边框虚线化
  • fill 填充色
  • fill-opacity样式属性将填充透明化

SVG 椭圆 ellipse

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <ellipse cx="40" cy="40" rx="30" ry="15"
           style="stroke:#006600; fill:#00cc00"/>

</svg>

属性

• 椭圆的圆心在cx，cy
• x和y方向上的半径有两个属性指定：rx和ry属性
• style 样式
  • stroke 边框的颜色
  • stroke-width样式属性设置边框的宽度
  • stroke-dasharray属性将边框虚线化
  • fill 填充色
  • fill-opacity样式属性将填充透明化

SVG 线 line

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <line x1="0"  y1="10" x2="0"   y2="100" style="stroke:#006600;"/>
        <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/>
        <line x1="20" y1="10" x2="100" y2="50"  style="stroke:#006600;"/>
        <line x1="30" y1="10" x2="110" y2="10"  style="stroke:#006600;"/>
</svg>

属性

• 起点为x1和y1属性值所设置的点
• 终点为x2和y2属性值指定的点
• style 样式

SVG 折线 polyline

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <polyline points="0,0  30,0  15,30"
        style="stroke:#006600;"/>
</svg>

• points 点集
• style 样式

SVG 多边形 polygon

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <polygon points="10,0  60,0  35,50"
         style="stroke:#660000; fill:#cc3333;"/>

</svg>

属性

• points 点集

SVG 路径 path

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M50,50
             A30,30 0 0,1 35,20
             L100,100
             M110,110
             L100,0"
          style="stroke:#660000; fill:none;"/>    
</svg>