<!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. 第一个struct2程序（2）

    第三步 需要使用ActionForm了.在Struts1.x中,必须要单独建立一个ActionForm类(或是定义一个动作Form),而在Struts2中ActionForm和Action已经二合一了 ...

  2. 01Tensorflow学习之Tensorflow基本介绍

    1 tensorflow简介 TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理.Tensor(张量)意味着N维数组,Flow(流)意味着基 ...

  3. 在windows 2008 R2中SQl Server 2008中代理启动失败的一个原因总结

    启动SQL代理的时候报错如下: 关调用实时(JIT)调试而不是此对话框的详细信息,请参见此消息的结尾. ************** 异常文本 **************System.NullRef ...

  4. python 形参

    def fun(x="dx",y="dy"): print "fun------" print x print y fun()fun(&qu ...

  5. linux下挂载磁盘操作

      重启服务器,查看是否挂载上去了 CentOS云服务器数据盘分区和格式化 腾迅云: http://wiki.qcloud.com/wiki/CentOS%E4%BA%91%E6%9C%8D%E5%8 ...

  6. JPA报错, PersistenceException_Unable to build Hibernate SessionFactory

    javax.persistence.PersistenceException: [PersistenceUnit: TestJPA] Unable to build Hibernate Session ...

  7. Windows phone自定义控件（无外观控件）——FlipPanel

    编码前 无外观自定义控件的定义在上一篇中已经有了,至于这一篇的自定义控件,比之前多加入了状态的变化,就像默认的Button具有Pressed.Normal等状态.在状态转变的同时可以加上一些动画,可以 ...

  8. Python并发讨论

    手段有多线程,多进程,协程. 对于多线程: 由于GIL(全局解释器锁)的存在,多线程实际是单线程的,不能发挥多核的作用: 但对于IO密集型程序,多线程对于效率是有提高的,由于阻塞时,可能会切换到别的线 ...

  9. 安装Oracle客户端寻找配置文件tnsnames.ora

    # tnsnames.ora Network Configuration File: D:\app\Administrator\product\11.2.0\dbhome_1\network\admi ...

  10. spring框架之AspectJ的XML方式完成AOP的开发

    1. 步骤一:创建JavaWEB项目,引入具体的开发的jar包 * 先引入Spring框架开发的基本开发包 * 再引入Spring框架的AOP的开发包 * spring的传统AOP的开发的包 * sp ...