d3js折线转曲线_如何使用d3js制作可视化图表

1. 如何使用d3.js制作可视化图表

D3是目前最流行的javaScript可视化图表库之一，D3的图表类型非常丰富，并且支持SVG格式，因此应用十分广泛，也有很多图表插件基于D3开发，比如MetricsGraphics.js，在D3上构建的数据图表非常强大。

D3的特点

允许绑定任意数据到DOM，将数据驱动转换应用到Document中。

不仅可以创建精美的HTML表格，而且可以绘制折线图、柱形图和饼图等数据图表。

支持SVG，在Web页面上渲染毫无压力。

回到顶部

D3的使用方法

关于D3的具体用法，可以看D3图形库API参考这篇文章。本文主要对介绍一些经典图表的实现效果及代码。

<!DOCTYPEhtml>
<metacharset="utf-8">
<style>

svg{
font:10pxsans-serif;
}

.y.axispath{
display:none;
}

.y.axisline{
stroke:#fff;
stroke-opacity:.2;
shape-rendering:crispEdges;
}

.y.axis.zeroline{
stroke:#000;
stroke-opacity:1;
}

.title{
font:30078pxHelveticaNeue;
fill:#666;
}

.birthyear,
.age{
text-anchor:middle;
}

.birthyear{
fill:#fff;
}

rect{
fill-opacity:.6;
fill:#e377c2;
}

rect:first-child{
fill:#1f77b4;
}

</style>
<body>
<scriptsrc="http://d3js.org/d3.v3.min.js"></script>
<script>

varmargin={top:20,right:40,bottom:30,left:20},
width=960-margin.left-margin.right,
height=500-margin.top-margin.bottom,
barWidth=Math.floor(width/19)-1;

varx=d3.scale.linear()
.range([barWidth/2,width-barWidth/2]);

vary=d3.scale.linear()
.range([height,0]);

varyAxis=d3.svg.axis()
.scale(y)
.orient("right")
.tickSize(-width)
.tickFormat(function(d){returnMath.round(d/1e6)+"M";});

//AnSVGelementwithabottom-rightorigin.
varsvg=d3.select("body").append("svg")
.attr("width",width+margin.left+margin.right)
.attr("height",height+margin.top+margin.bottom)
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")");

//.
varbirthyears=svg.append("g")
.attr("class","birthyears");

//Alabelforthecurrentyear.
vartitle=svg.append("text")
.attr("class","title")
.attr("dy",".71em")
.text(2000);

d3.csv("population.csv",function(error,data){

//Convertstringstonumbers.
data.forEach(function(d){
d.people=+d.people;
d.year=+d.year;
d.age=+d.age;
});

//.
varage1=d3.max(data,function(d){returnd.age;}),
year0=d3.min(data,function(d){returnd.year;}),
year1=d3.max(data,function(d){returnd.year;}),
year=year1;

//Updatethescaledomains.
x.domain([year1-age1,year1]);
y.domain([0,d3.max(data,function(d){returnd.people;})]);

//[male,female].
data=d3.nest()
.key(function(d){returnd.year;})
.key(function(d){returnd.year-d.age;})
.rollup(function(v){returnv.map(function(d){returnd.people;});})
.map(data);

//.
svg.append("g")
.attr("class","yaxis")
.attr("transform","translate("+width+",0)")
.call(yAxis)
.selectAll("g")
.filter(function(value){return!value;})
.classed("zero",true);

//(sothatnoenterorexitisrequired).
varbirthyear=birthyears.selectAll(".birthyear")
.data(d3.range(year0-age1,year1+1,5))
.enter().append("g")
.attr("class","birthyear")
.attr("transform",function(birthyear){return"translate("+x(birthyear)+",0)";});

birthyear.selectAll("rect")
.data(function(birthyear){returndata[year][birthyear]||[0,0];})
.enter().append("rect")
.attr("x",-barWidth/2)
.attr("width",barWidth)
.attr("y",y)
.attr("height",function(value){returnheight-y(value);});

//Addlabelstoshowbirthyear.
birthyear.append("text")
.attr("y",height-4)
.text(function(birthyear){returnbirthyear;});

//Addlabelstoshowage(separate;notanimated).
svg.selectAll(".age")
.data(d3.range(0,age1+1,5))
.enter().append("text")
.attr("class","age")
.attr("x",function(age){returnx(year-age);})
.attr("y",height+4)
.attr("dy",".71em")
.text(function(age){returnage;});

//.
window.focus();
d3.select(window).on("keydown",function(){
switch(d3.event.keyCode){
case37:year=Math.max(year0,year-10);break;
case39:year=Math.min(year1,year+10);break;
}
update();
});

functionupdate(){
if(!(yearindata))return;
title.text(year);

birthyears.transition()
.ration(750)
.attr("transform","translate("+(x(year1)-x(year))+",0)");

birthyear.selectAll("rect")
.data(function(birthyear){returndata[year][birthyear]||[0,0];})
.transition()
.ration(750)
.attr("y",y)
.attr("height",function(value){returnheight-y(value);});
}
});

2. 求解，前端和后端交互需要学什么比如说，后端发送数据，前端接收到数据后自动生成数据的折线图或表格。

要学习前端和后端沟皮山通的桥梁 http协议，前端和后端是典型的B/S结构，客户端（前端）提交Request（请求），有服务器端（后端）提供响应（Response），Request有get，post，put等方法，Response有各种返回斗唤的状态码
要学习现在主流的Web交互方式（前端和后端交互）RESTful，使用JSON格式描述数据
要学习后端技术，比如nodejs
要学习前端技术，javascript和流行的框架reactjs，vuejs等，可以简单方便的实现数据的双向绑定，一般的数据表格可以轻松展现
如要要把数据生成复杂的表格或图形还需要更强大的数燃销中据图形类的框架来实现，流行的有d3js，chartjs等

3. 实例教学：使用 D3.js 实现数据可视化

D3.js 是一款强大的数据可视化库，通过 HTML、SVG 和 CSS 的组合，赋予数据生动的视觉表达。对于Web开发者而言，学习jQuery、Underscore和D3这三个库能让你以新的视角理解编程，尤其是D3，它提供了丰富的数据操作工具和图形编程思想。本文将通过实例展示D3如何将数据与文档结构关联，并逐步深入到Scales和Selections的概念。

从柱状图开始，利用selectAll方法创建元素并根据输入数据动态生成HTML结构，如一组数据[4, 8, 15, 16, 23, 42]将对应生成对应的柱状图。D3的灵活性体现在它能与SVG无缝协作，如创建交互式的圆形元素。

通过Scales函数，可以调整数据映射到屏幕坐标系，确保动态数据在特定范围内的可视化。例如，将一条折线图数据映射到500px X 200px的区域内，D3的scale功能使得图形布局更合理。

动态数据可视化则以墨尔本到悉尼的航线为例，通过时间轴和路线数据的映射，实现数据的动态更新和过渡效果，如平滑地添加或移除航班信息。

D3鼓励创新，虽然只展示了部分内容，但读者可以从D3 Gallery和Scott Murray的教程中探索更多可能。记住，当你掌握这些基础知识后，尝试创新地应用到你的数据可视化项目中，并分享你的成果。

导航:首页 > 编程语言 > d3js折线转曲线

d3js折线转曲线

与d3js折线转曲线相关的资料

友情链接