d3生成器--line，area，diagonal

最新推荐文章于 2024-08-16 11:43:03 发布

Brave_liberty

最新推荐文章于 2024-08-16 11:43:03 发布

阅读量4.1k

点赞数

分类专栏： d3可视化文章标签： d3 生成器可视化

本文链接：https://blog.csdn.net/qq_31396185/article/details/78147612

版权

本文介绍了D3.js中的line、area和diagonal生成器。line生成器用于创建直线，支持不同的插值模式如step和basis。area生成器则根据x、y0和y1生成区域，结合时间比例尺使用。diagonal生成器用于生成多条曲线，需定义source和target。

摘要由CSDN通过智能技术生成

1.线生成器—直线

line生成器生成的是直线，两点确定一条直线，所以line需要指定x，y的坐标，在文档中成为访问器，也叫访问函数，同时还可以指定插值模式，就是两点之间采用什么样的策略确定插值点，有step，basis，linear等。总之就是在定义生成器的时候会在后边定义它生成它所需要的一些属性。

// 线生成器
// var lineData=[[1,50],[40,10],[100,90],[130,30],[144,89]]
var lineData=[80,120,160,200,240,280]
// var lineData=[];
// for (var i=-10;i<20;i++){
   
//     lineData.push([i,i*i-2*i]);
// }
//d中传入的只是外边大数据的一级子元素，不一定非得是坐标形式
var line = d3.svg.line()
                         .x(function(d){
   return d;})
                         .y(function(d,i){
   return i%2==0 ? 40:120;})
                         // .defined(function(d){    //跳过缺失值
                         //    return d<300;
                         // })
                         .interpolate("step")
                         // .tension(0.1);

//svg容器
var svgContainer = d3.select("body").append("svg")
                                    .attr("width",600)
                                    .attr("height",200);

//把path扔到容器中-- lineData和lineFunction，并给d赋属性
var lineGraph = svgContainer.append("g")
                            .append("path")
                            .attr("d",line(lineData))
                            .attr("stroke","blue")
                            .attr("stroke-width",2)
                            .attr("fill","none")
                            .attr("transform","translate(0,20)");