欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

d3js svg基础

程序员文章站 2022-03-20 18:04:59
...
        <svg width="8000" height="9000" version = "1.1">
                <!-- 矩形 -->	
                <rect x="20" y = "20" width="200" height="100" style="fill:red;stroke:blue;stroke-width:4;opacity:0.5"/>
                <rect x="300" y = "20" width="200" height="100" rx="20" ry="30" style="fill:red;stroke:blue;stroke-width:4;opacity:0.5"/>
                    <!-- 圆形 -->	
                <circle cx="150" cy="250"  r="80" style="fill:yellow;stroke:black;stroke-width:4" />
                        <!-- 椭圆-->	
                <ellipse cx="350" cy="250" rx="110" ry="80" style="fill:#33FF33;stroke:blue;stroke-width:4" />
                    <!-- 直线 线段 -->
                 <line x1="20" y1="300" x2="300" y2="400" style="stroke:black;stroke-width:4;" />
                    <!-- 多边形 折线 -->	
                <polygon points="100,20 20,90 60,160 140,160 180,90"
                    style="file:LawnGreen;stroke:black;stroke-width:3"/>

                    <!--  折线 -->	
                <!-- <polyline points="100,20+100 20,90+100 60,160+100 140,160+100 180,90+100"
                    style="file:white;stroke:black;stroke-width:3" transform="translate(200,0)"/> -->

                    <!-- 路径 -->	
                    <path d="M30,100 L270,300 M30,100 H270 M30,100 v300"
                        style="stroke:black;stroke-width:3" />
                    <!-- 圆形 -->	
                    <!-- 圆形 -->		
            </svg>
    <p>Hello World 1</p>
    <p id="myid">Hello World 2</p>
    <script src="js/d3.v4.js" charset="utf-8"></script> 
    <script>  
相关标签: 可视化