D3学习笔记：线性图表

adie 发布于2019-08-20 15:52 / 3006人阅读

摘要：稍稍对上面的代码改变就能得到面积图标参考使用制作图表




    
    linechart

#container{
    background: #ffffd;
    width: 500px;
    height: 250px;
}

path{
    fill:none;
    stroke:steelblue;
    stroke-width:3;
}

text{
    fill:black;
}

.domain,.tick{
    stroke:gray;
    stroke-width:1;

}

//width,height
var width =500,
height =250,
margin = {left:50,top:30,right:20,bottom:20},
g_width = width - margin.left -margin.right,
g_height = height -margin.top - margin.bottom;

//svg
var svg = d3.select("#container")
.append("svg")
.attr("width",width)
.attr("height",height)

var g = d3.select("svg").append("g").attr("transform","translate("+margin.left+","+margin.top+")")



var data = [1,3,5,7,8,4,3,7]
var scale_x = d3.scaleLinear().domain([0,data.length-1]).range([0,g_width])

var scale_y = d3.scaleLinear().domain([0,d3.max(data)]).range([g_height,0])


var line_generator = d3.line()
.x(function(d,i){return scale_x(i);})//0,1,2,3...
.y(function(d){return scale_y(d);})//1,3,5
.curve(d3.curveCardinal)

g.append("path").attr("d",line_generator(data))


var x_axis =d3.axisBottom(scale_x),
y_axis =d3.axisLeft(scale_y);


g.append("g").call(x_axis).attr("transform","translate(0,"+g_height+")")
g.append("g").call(y_axis).append("text").text("Price($)").attr("transform","rotate(-90)").attr("text-anchor","end").attr("dy","2em")

稍稍对上面的代码改变就能得到面积图标

参考

使用D3制作图表
D3 API Reference

idc机房托管专线服务学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82545.html

D3学习笔记：水平柱状图表

摘要：方法用于对选中的结果集绑定数据。方法和方法表示由于此时元素还不存在，必须根据数据的个数将它们创造出来。方法和方法的参数是函数，表示函数的运行结果就是设置网页元素的值用效果代码注意版本版本参考柱状图例子 github仓库戳这里镜心的小树屋不用svg showImg(https://segmentfault.com/img/bVQRyc?w=1453&h=326); ...

104828720 2019-08-20 15:55 评论0 收藏0
D3.js可视化前端框架的使用要点

摘要：该事件不会区分字母的大小写，例如和被视为一致。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。而有元素与数据对应的部分称为。 1.安装

MASAILA 2019-08-22 14:57 评论0 收藏0
11个React Native 组件库和 Javascript 数据可视化库

摘要：数据可视化库超过的的可能是最流行和最广泛的数据可视化库。是一组组件，用于高效地渲染大型列表和表格数据。一种优雅而灵活的方式，可以利用组件来支持实际的数据可视化。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ React Native 组件库 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

tangr206 2019-08-23 17:11 评论0 收藏0
d3.js ----面积图表

摘要：设置坐标轴样式，将线性图标的下段代码中的改为坐标点的值为数组的下标，参数表示传进来的数据，表示下标表示轴表示实际曲线上的值让线条变得光滑，不是折线而是光滑的曲线当页面有多个相同元素，只能选择符合条件的第一个元素，想要选择其中某一个指定的元素 d3设置坐标轴样式，将线性图标的下段代码中的line改为area var area_generator = d3.svg.area() ...

jemygraw 2019-08-02 15:59 评论0 收藏0
d3.js ----面积图表

摘要：设置坐标轴样式，将线性图标的下段代码中的改为坐标点的值为数组的下标，参数表示传进来的数据，表示下标表示轴表示实际曲线上的值让线条变得光滑，不是折线而是光滑的曲线当页面有多个相同元素，只能选择符合条件的第一个元素，想要选择其中某一个指定的元素 d3设置坐标轴样式，将线性图标的下段代码中的line改为area var area_generator = d3.svg.area() ...

Null 2019-08-21 17:56 评论0 收藏0