d3区域生成器

来源:互联网 发布:js获取页面所有内容 编辑:程序博客网 时间:2024/06/05 05:44

代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script type="text/javascript" src = "http://d3js.org/d3.v3.min.js"></script>    <script type="text/javascript">        var dataset = [80,120,130,70,60,90]        var width = 600;        var height = 600;        var svg = d3.select("body").append("svg")                    .attr("width",width)                    .attr("height",height)        var areaPath = d3.svg.area()                            .x(function(d,i){ return 50 + i * 80;})                            .y0(function(d,i){return height/2})                            .y1(function(d,i){return height/2 - d})                            .interpolate("basis")        //添加路径        svg.append("path")            .attr("d",areaPath(dataset))            .attr("stroke","black")            .attr("stroke-width","3px")            .attr("fill","yellow");    </script></body></html>

运行结果如下图所示:

这里写图片描述

原创粉丝点击