d3.js实现竖直柱状图表

蔚落 2022-04-18 02:39 223阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" type="text/css"/>
    </head>
    <body>
    	<div id="container"></div>
    	
    	<script src="http://d3js.org/d3.v3.js" type="text/javascript"></script>
    	<script src="js/index.js" type="text/javascript"></script>
    </body>
    </html>

index.js

var data = [1,4,7,2,9,13,5,8,2,9],
    bar_width = 50,
    bar_padding = 10,
    svg_width = (bar_width + bar_padding)*data.length,
    svg_height=500;
    
    var scale = d3.scale.linear()
    .domain([0,d3.max(data)])
    .range([svg_height,0]);
    
    var svg = d3.select("#container")
    .append("svg")
    .attr("width",svg_width)
    .attr("height",svg_height)
    
    var bar = svg.selectAll("g")
    .data(data)
    .enter()
    .append("g")
    .attr("transform",function(d,i){return "translate("+ i*(bar_width+bar_padding) +",0)";})
    
    bar.append("rect")
    .attr({
    	"y":function(d){return scale(d);},
    	"width":bar_width,
    	"height":function(d){return svg_height - scale(d);}
    })
    .style("fill","steelblue")
    
    bar.append("text")
    .text(function(d){return d;})
    .attr({
    	"y":function(d){return scale(d);},
    	"x":bar_width/2,
    	"dy":15,
    	"text-anchor":"middle"
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: /images/20220418/c0dbd72290264adbbf277899cd251b32.png

发表评论取消回复

表情：

评论列表（有 0 条评论，223人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3 中使用echarts图表——柱状图

柱状图是比较常用的图形结构，所以我先收集一些精美的柱状图。

矫情吗；*/ 2024年04月22日 15:19/ 0 赞/ 82 阅读

相关 Python教程：将matplotlib水平条形图转化为竖直柱状图

Python教程：将matplotlib水平条形图转化为竖直柱状图在数据可视化过程中，条形图和柱状图通常是用来展示分类变量中各类别的数量或比例的两种主要图表类型。水平条形图

忘是亡心i/ 2024年03月16日 21:48/ 0 赞/ 55 阅读

相关 ECharts 实现3D重叠椭圆柱状图

1 实现代码（3D重叠椭圆柱状图） <body>  <div i

亦凉/ 2023年10月05日 11:29/ 0 赞/ 49 阅读

相关 Echart 基于maptalks3D地图实现3D柱状图

例子来源[ECharts Gallery - 上海居民活动点分布可视化 (makeapie.com)][ECharts Gallery - _ _makeapie.com]

深藏阁楼爱情的钟/ 2022年12月25日 00:54/ 0 赞/ 291 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 659 阅读

相关利用js生成3D柱状图

1.引用js文件 <script src="${pageContext.request.contextPath }/js/highcharts.js"></scrip

拼搏现实的明天。/ 2022年05月17日 07:36/ 0 赞/ 246 阅读

相关 d3.js实现竖直柱状图表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm

蔚落/ 2022年04月18日 02:39/ 0 赞/ 224 阅读

相关 d3.js水平横向柱状图表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm

骑猪看日落/ 2022年04月18日 02:35/ 0 赞/ 298 阅读

相关 D3 二维图表的绘制系列（五）横向柱状图

上一篇：堆叠柱状图 https://blog.csdn.net/zjw\_python/article/details/98207916 下一篇：基础折线图 https:

た入场券/ 2021年11月10日 09:36/ 0 赞/ 502 阅读

相关 D3 二维图表的绘制系列（二）基础柱状图

下一篇：多列柱状图 https://blog.csdn.net/zjw\_python/article/details/98205614 代码结构和初始化画布的Chart对

客官°小女子只卖身不卖艺/ 2021年11月10日 08:30/ 0 赞/ 468 阅读