d3.js-svg

Posted zhouwenbo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了d3.js-svg相关的知识，希望对你有一定的参考价值。

1.svg基础

话不多说直接上代码。

<svg width=500 height=960>

    <rect x="0" y="0" width="500" height="50"/>
    <ellipse cx="250" cy="225" rx="100" ry="25"/>
    <line x1="0" y1="120" x2="500" y2="50" stroke="black"/>
    <text x="250" y="155" font-family="sans-serif" 
            font-size="25" fill="gray">Easy-peasy</text>
    <circle cx="25" cy="80" r="20"
            fill="rgba(128, 0, 128, 0.75)" 
            stroke="rgba(0, 255, 0, 0.25)" 
            stroke-width="100"/>
    <circle cx="75" cy="80" r="20"
            fill="rgba(0, 255, 0, 0.75)"
            stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/>
    <circle cx="125" cy="80" r="20"
            fill="rgba(255, 255, 0, 0.75)"
            stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/>
    <rect x="0" y="300" width="30" height="30" fill="purple"/>
    <rect x="20" y="305" width="30" height="30" fill="blue"/>
    <rect x="40" y="310" width="30" height="30" fill="green"/>
    <rect x="60" y="315" width="30" height="30" fill="yellow"/>
    <rect x="80" y="320" width="30" height="30" fill="red"/>
    <circle cx="25" cy="425" r="22" class="pumpkin"/>
    <circle cx="25" cy="525" r="20" fill="rgba(128, 0, 128, 1.0)"/>
    <circle cx="50" cy="525" r="20" fill="rgba(0, 0, 255, 0.75)"/>
    <circle cx="75" cy="525" r="20" fill="rgba(0, 255, 0, 0.5)"/>
    <circle cx="100" cy="525" r="20" fill="rgba(255, 255, 0, 0.25)"/>
    <circle cx="125" cy="525" r="20" fill="rgba(255, 0, 0, 0.1)"/>
    <circle cx="25" cy="625" r="20" fill="purple" 
            stroke="green" stroke-width="10"
            opacity="0.9"/>
    <circle cx="65" cy="625" r="20" fill="green"
            stroke="blue" stroke-width="10"
            opacity="0.5"/>
    <circle cx="105" cy="625" r="20" fill="yellow"
            stroke="red" stroke-width="10"
            opacity="0.1"/>
</svg>

话不多说直接上效果图

技术分享图片

2.d3 svg

话不多说上代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>testD3-7-drawSVG.html</title>
    <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<style type="text/css">
    </style>
</head>
<body>
<script type="text/javascript">
    // SVG尺寸
    var w = 500;
    var h = 50;

    // 数据
    var dataset = [ 5, 10, 15, 20, 25 ];

    // 创建SVG容器
    var svg = d3.select("body")
                .append("svg")
                .attr("width", 500)
                .attr("height", 50);

    // 创建圆
    var circles = svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle");

    // 根据数据设置每个圆的属性
    circles.attr("cx", function(d, i) {
            return (i * 50) + 25;
        })
       .attr("cy", h/2)
       .attr("r", function(d) {
            return d;
       });
</script>

</body>
</html>

话不多说，上效果图（就是五个圆，后面的越来越大）。自己可以试试






以上是关于d3.js-svg的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

片段和活动之间的核心区别是啥？哪些代码可以写成片段？

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段——声明函数