<!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. js中常用的事件

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 疯狂JAVA——第三章 数据类型和运算符

    3.1注释 1.单行注释 2.多行注释 3.文档注释——文档注释以斜线后紧跟两个星号(/**)开始,以星号后紧跟一个斜线结束(*/),中间部分都是文档注释,会被提取到API文档中. API文档类似于产 ...

  3. do{}while() ；异常语句

    //while (true) //只要括号里面是true(正确的如:(1==1)),就会无限循环 //{ //} //do{}while() //不管while满足与否,首先先做一遍 //然后去看wh ...

  4. destoon 分页

    php: global $pagesize,$page; $pagesize = 10;//分页改为10条一页 $offset or $offset = ($page-1)*$pagesize; $t ...

  5. Spring Boot 连接池

    配置方法 基于当前的1.5.2.RELEASE的Spring Boot. 依照官方文档,如果增加了如下依赖的配置,或者类路径中存在spring-boot-starter-jdbc的jar,那么已默认启 ...

  6. jsp页面添加时间

    <%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <body& ...

  7. 两个onCreate方法？你真的了解onCreate()么？

    Activity的onCreate方法一直是我们编写一个activity最先重载的方法.细心的小伙伴在编写代码的时候回看到这样一幕: 咦,这里怎么会有两个onCreate提供给我们重载?选择困难症患者 ...

  8. 97. Interleaving String (String; DP)

    Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example,Given:s1 = ...

  9. 创建HTML元素的方法

    第一种:使用 parent.appendchild()方法 HTML页面 <div id="div1"></div> JS文件 //第一步创建标签元素节点 ...

  10. 接触mybatis使用

    1.mybatis mybatis是一个自定义sql.存储过程和高级映射的持久层框架,是Apache下的顶级项目. mybatis可以让程序员将主要精力放在sql上,通过mybatis提供的映射方式. ...