<!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. spring中作用域的问题

    在一般情况下:我们登录系统时,第一次登录当用户名或密码输入错误,在登录页面给出错误原因,当我们再刷新登录页面,应该是首次登录系统的页面(这时就不应该再给出出错提示),这时我们就应该想到错误提示信息到底 ...

  2. 神经网络中embedding层作用——本质就是word2vec，数据降维，同时可以很方便计算同义词（各个word之间的距离），底层实现是2-gram（词频）+神经网络

    Embedding tflearn.layers.embedding_ops.embedding (incoming, input_dim, output_dim, validate_indices= ...

  3. SQL获取分组后取某字段最大一条记录（求每个类别中最大的值的列表）

    获取分组后取某字段最大一条记录 方法一:(效率最高) select * from test as a where typeindex = (select max(b.typeindex) from t ...

  4. linux一些基本常识（三）

    acl:对本身权限的扩展    打包:zip 111.zip a.txt b.txt.....    zip -r /etc/sysconfig/* (样才能第归所有内容0)    解宝:uzip 1 ...

  5. 基于JS的文本验证

    1,不能为空 <input type="text" onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert(' ...

  6. 大型运输行业实战_day07_1_订单查看实现

    1.业务分析 每个在窗口售票的售票员都应该可以随时查看自己的售票信息 简单的界面入口如图所示: 对应的html代码: <button onclick="orderDetail()&qu ...

  7. FastDFSClient工具类 文件上传下载

    package cn.itcast.fastdfs.cliennt; import org.csource.common.NameValuePair; import org.csource.fastd ...

  8. Java工具类_表结构自动生成对应的实体类、Mapper.xml文件、Dao类

    import java.io.File; import java.io.FileWriter; import java.io.IOException; import java.io.PrintWrit ...

  9. ccf认证模拟题之三---最大的矩形

    问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ i ≤ n)个矩形的高度是hi.这n个矩形构成了一个直方图.例如,下图中六个矩形的高度就分别是3, 1, 6, 5, 2, 3 ...

  10. goim源码分析与二次开发-comet分析二

    这篇就是完全原版了,作为一个开始,先介绍comet入口文件main.go 第一步是初始化配置,还有白名单.还有性能监口,整体来说入口代码简洁可读性很强 然后开始初始化监控,还有bukcet这里buck ...