<!DOCTYPE html>

<html>

 <head>

   <title>tension</title>

   <script type="text/javascript" src="../d3.min.js"></script>

   <script type="text/javascript" src="flare.json"></script>

   <style type="text/css">

/*tension*/

body {

  font: 10px sans-serif;

}

.rule line {

  stroke: #eee;

  shape-rendering: crispEdges;

}

.rule line.axis {

  stroke: #;

}

path {

  fill: none;

  stroke-width: .5px;

}

circle {

  fill: #fff;

  stroke: #;

}

   </style>

 </head>

 <body>    

   <script type="text/javascript">

//tension example:相同的数据使用不同的tension可以画出多条线段。

//这里没有用坐标轴，是用line来画的。

var data=d3.range().map(function(i){

    return {x:i/ ,y:(Math.sin(i*)+)/};

})

;

var w=

    ,h=

    ,p=

    ,x=d3.scale.linear().domain([,]).range([p,w-p])

    ,y=d3.scale.linear().domain([,]).range([h-p,p])

    ;

var line=d3.svg.line()

           .interpolate('cardinal')  //不要写错了。

           .x(function(d){

            return x(d.x);//Object {x: 0, y: 0.5}

           })

           .y(function(d){

            return y(d.y);

           })

           ;

var vis=d3.select('body')

          .append('svg:svg')

          .attr({

            'width':w

            ,'height':h

          })

          .append('svg:g')

          ;

var  rules=vis.selectAll('g.rule')

              .data(x.ticks())

              .enter()

              .append('svg:g')

              .attr({

                'class':'rule'

              })

              ;

rules.append('svg:line')

     .attr({

        'x1':x

        ,'x2':x

        ,'y1':p

        ,'y2':h-p-

     })

     ;

rules.append('svg:line')

     .attr({

        'class':function(d){

            return d? null:'axis';

        }

        ,'x1':p

        ,'x2':w-p-

        ,'y1':y

        ,'y2':y

     })

     ;

rules.append('svg:text')

     .attr({

        'x':x

        ,'y':h-p+

        ,'dy':'.71em'  //移动的纵坐标

        ,'text-anchor':'middle'

     })

     .text(x.tickFormat())

     ;

rules.append('svg:text')

     .attr({

        'x':p-

        ,'y':y

        ,'dy':'.35em'  //移动的纵坐标

        ,'text-anchor':'end'

     })

     .text(x.tickFormat())

     ;

vis.selectAll('path')

   .data([, 0.2, 0.4, 0.6, 0.8, ])

   .enter()

   .append('svg:path')

   .attr({

    'd':function(d){

        return line.tension(d)(data);

    }

   })

   .style({

    'stroke':d3.interpolateRgb('brown','steelblue')

   })

   ;

vis.selectAll('circle')

   .data(data)

   .enter()

   .append('svg:circle')

   .attr({

    'cx':function(d){

        return x(d.x);

    }

    ,'cy':function(d){

        return y(d.y);

    }

    ,'r':4.5

   })

   ;

   </script>

 </body>

</html>

注：d为1时，则为直线，因为使用了基数样条插值，d为0时，并不是非常圆滑的。

line tension的更多相关文章

  1. D3、EChart、HighChart绘图demol

    1.echarts:   <!DOCTYPE html>   <html>   <head>   <meta charset="utf-8" ...

  2. 软件项目技术点(1)——d3.interpolateZoom-在两个点之间平滑地缩放平移

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 软件参考d3的知识点 我们在软件中主要用到d3.js的核心函数d3.interpolateZoom - 在两个点之间平滑地缩放平移.请 ...

  3. Charts & canvas & RGBA

    Charts & canvas RGBA color let stopFlag = 0; // show Charts const showCharts = (name = "&qu ...

  4. D3js-API介绍【英】

    Everything in D3 is scoped under the d3 namespace. D3 uses semantic versioning. You can find the cur ...

  5. D3.js 线段生成器 (V3版本)

    线段生成器 与线段生成器相关的方法: d3.svg.line() //创建一个线段生成器.   line(data) //使用线段生成器绘制data数据.   line.x([x]) //设置或获取线 ...

  6. D3js-API介绍【中】

    JavaScript可视化图表库D3.js API中文參考,d3.jsapi D3 库所提供的全部 API 都在 d3 命名空间下.d3 库使用语义版本号命名法(semantic versioning ...

  7. 【D3 API 中文手冊】

    [D3 API 中文手冊] 声明:本文仅供学习所用,未经作者同意严禁转载和演绎 <D3 API 中文手冊>是D3官方API文档的中文翻译. 始于2014-3-23日,基于VisualCre ...

  8. Hexo博客中插入 Chart 动态图表

    该文基本(全部)来自于chatjs中文文档 由于使用pjax,导致页面需要二次刷新才会显示表格,故引入了自动刷新的JS,但这样会导致回退标签失效 背景 今天在谷歌上逛博客时,突然发现shen-yu大佬 ...

  9. Chart.js & CPU 性能监控

    Chart.js 可视化动态 CPU 性能监控 https://github.com/gildata/RAIO/issues/337 https://github.com/chartjs/Chart. ...

随机推荐

  1. SharePoint 2010 图表控件

    需求: 统计每周的事件创建数量及关闭数量 以折线的形式显示 一张图表显示两条折线 知识点: 图表控件的使用 外部内容类型 数据库(sql)view(数据源) 结果:

  2. VS文件发布不了，这样设置可以解决

    在VS里面新增一些文件的时候,往往发布的时候会发布不了,比如:(*.rdlc,*.p12).在项目里面,这些项目已经包含在项目里了,但是发布后,会发现这些文件并没有被发布出来 解决办法:邮件选择文件, ...

  3. Redis的简介

    Redis 简介 Redis 是一个高性能的key-value数据库.支持复杂的数据结构,支持持久化,支持主从集群,支持高可用,支持较大的value存储... Redis是一个nosql,非关系型数据 ...

  4. zoj1003-Max Sum (最大连续子序列之和)

    http://acm.hdu.edu.cn/showproblem.php?pid=1003 Max Sum Time Limit: 2000/1000 MS (Java/Others)    Mem ...

  5. Python frozenset() 函数

    Python frozenset() 函数  Python 内置函数 描述 frozenset() 返回一个冻结的集合,冻结后集合不能再添加或删除任何元素. 语法 frozenset() 函数语法: ...

  6. Water Tree(树链剖分+dfs时间戳)

    Water Tree http://codeforces.com/problemset/problem/343/D time limit per test 4 seconds memory limit ...

  7. 53. Maximum Subarray最大求和子数组12 3（dp）

    ［抄题］: Find the contiguous subarray within an array (containing at least one number) which has the la ...

  8. 设置网站默认用IE7打开

    head中加入以下内容 <meta http-equiv="X-UA-Compatible" content="IE=7" />

  9. Repeater嵌套Repeater

    <asp:Repeater ID="rptXiaoLei" runat="server" OnItemDataBound="rptXiaoLei ...

  10. 动态输出的javascript中alert文本的换行问题

    这个简单<%out.println("<script>alert('姓名:xx\\n性别:女\\n爱好:吃\\n')</script>");%> ...