d3.js实现竖直柱状图表

蔚落 2022-04-18 02:39 185阅读 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 条评论，185人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm

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

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

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

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

相关 D3 二维图表的绘制系列（四）堆叠柱状图

上一篇：多列柱状图 https://blog.csdn.net/zjw\_python/article/details/98205614 下一篇：横向柱状图 https:

末蓝、/ 2021年11月10日 09:28/ 0 赞/ 594 阅读

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

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

Dear 丶/ 2021年11月10日 09:02/ 0 赞/ 377 阅读

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

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

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