<!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. orientdb 学习

    简介 OrientDB 是一款 NoSQL 数据库.是一种文档-图数据库.即:既具有文档数据库的特性,又具有图数据库的功能. 端口 2424  OrientDB 监听 二进制 访问的的端口 (即:通过 ...

  2. MySQL高级-索引

    1.索引是什么 索引(Index)是帮助MySQL高效获取数据的数据结构.可以得到索引的本质:索引是数据结构. 可以理解为“排好序的快速查找数据结构” 在数据之外,数据库系统还维护着满足特定查找算法的 ...

  3. Java 命令行运行参数

    Java在运行已编译完成的类时,是通过java虚拟机来装载和执行的,java虚拟机通过操作系统命令JAVA_HOME"bin"java –option 来启动,-option为虚拟 ...

  4. Mysql InnoDB 数据更新 锁表

    一.数据表结构 1 2 3 4 5 6 7 8 9 10 CREATE TABLE `jx_attach` (   `attach_id` int(11) NOT NULL AUTO_INCREMEN ...

  5. ThreadPoolExecutor的execute源码分析

    上一篇文章指出,ThreadPoolExecutor执行的步骤如下: 向线程池中添加任务,当任务数量少于corePoolSize时,会自动创建thead来处理这些任务: 当添加任务数大于corePoo ...

  6. C++中的浅拷贝和深拷贝

    浅拷贝(shallow copy)与深拷贝(deep copy)对于值拷贝的处理相同,都是创建新对象,但对于引用拷贝的处理不同,深拷贝将会重新创建新对象,返回新对象的引用字.浅拷贝不会创建新引用类型. ...

  7. P3157 [CQOI2011]动态逆序对

    P3157 [CQOI2011]动态逆序对 https://www.luogu.org/problemnew/show/P3157 题目描述 对于序列A,它的逆序对数定义为满足i<j,且Ai&g ...

  8. docker搭建nginx

    在Docker下部署Nginx,包括: 部署一个最简单的Nginx,可以通过端口访问默认的网站 设置记录访问和错误日志的路径 以交互模式创建centos容器,如果本地没有镜像,会从仓库获取, 等待即可 ...

  9. MVC扩展HtmlHelper，加入RadioButtonList、CheckBoxList、DropdownList

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Linq.Expressions ...

  10. geoserver 通过代码实现发布地图服务

    GeoServer:代码实现批量发布地图服务 利用GeoServer发布WCS服务,那么如果我有很多数据需要进行发布,这样利用GeoServer提供的UI界面进行操作显然很不显示.那能不能利用GeoS ...