d3js 堆叠柱状图

2022-08-04 22:33:27 阅读：115 来源： 互联网

标签：const attr d3js 堆叠柱状图 dms data d3 append

　　这一章节介绍堆叠柱状图的画法，下面直接上图和数据。

　　1、准备数据

const stackBarData = [
            { year: 2015, HW: 3740, XM: 920, MAC: 980, www: 490 },
            { year: 2016, HW: 1400, XM: 1840, MAC: 960, www: 1400 },
            { year: 2017, HW: 640, XM: 930, MAC: 620, www: 400 },
            { year: 2018, HW: 920, XM: 480, MAC: 1600, www: 400 }
        ];
const stackBarKeys = Object.keys(stackBarData[0]).splice(1, 5);

　// 1、处理数据 const data = d3.stack() .keys(stackBarKeys) .order(d3.stackOrderNone)(stackBarData);

　　为了方便起见，这边在知道长度的情况下获取了每个柱子区间对应的label。

　　2、create dimensions

const dms = {
　　　　　　width: 1400,
　　　　　　height: 600,
　　　　　　margin: {
　　　　　　　　top: 50,
　　　　　　　　right: 150,
　　　　　　　　left: 30,
　　　　　　　　bottom: 50
　　　　　　　　}
　　　　　　}
dms.innerWidth = dms.width - dms.margin.left - dms.margin.right;
dms.innerHeight = dms.height - dms.margin.top - dms.margin.bottom;

　　3、draw canvas

const mainsvg = d3.select('#stack-bar')
　　　　　　　　　.append('svg')
　　　　　　　　　.attr('width', dms.width)
　　　　　　　　　.attr('height', dms.height)
const maingroup = mainsvg.append('g')
　　　　　　　　　　.attr('transform', `translate(${dms.margn.left}, ${dms.margin.top)`)
const stackBarArea = maingroup.append('g')
                            .attr('id', 'stack-bar-area')

　　4、create scale and color

const xScale = d3.scaleBand()
        .domain(stackBarData.map(d=>d.year))
        .range([0, dms.innerWidth])
        .padding(0.2) // 柱子之间的距离

const yScale = d3.scaleLinear()
        .domain([0, d3.max(data, d=>d3.max(d, subd =>subd[1]))])
        .range([dms.innerHeight, 0])
        .nice()

const colors = d3.scaleOrdinal()
        .domain(stackBarKeys)
        .range(d3.schemeCategory10)   // 10种颜色

　　5、draw data

const dataGroup = stackBarArea.selectAll('g')
                    .data(data)
                    .join('g')
                    .attr('class', 'dataGroup')
                    .attr('fill', d=>colors(d.key))
                    .attr('opacity', 0.8)

 dataGroup.selectAll('rect')
                    .data(d=>d)
                    .join('rect')
                    .attr('class', 'datarect')
                    .attr('x', d=>xScale(d.data.year))
                    .attr('y', d=>yScale(d[1]))
                    .attr('width', xScale.bandwidth())
                    .attr('height', d=>yScale(d[0]) - yScale(d[1]))

　　6、create axes

const xAxis = d3.axisBottom(xScale)
        
const xAxisGroup = maingroup.append('g')
                            .call(xAxis)
                            .attr('transform',`translate(0, ${dms.innerHeight})`)

const yAxis = d3.axisLeft(yScale)
                    
const yAxisGroup = maingroup.append('g')
                            .call(yAxis)

　　7、create legend

const legendArea = maingroup.append('g')
                            .selectAll('g')
                            .data(stackBarKeys)
                            .join('g')
                            .attr('class', 'legend')
                            .attr('transform', (d, i) =>`translate(0, ${i * 22})`)

legendArea.append('rect')
                    .attr('x', dms.innerWidth + 5)
                    .attr('width', 19)
                    .attr('height', 16)
                    .attr('fill', d=>colors(d))
                    .attr('opacity', 0.8)

        
legendArea.append('text')
                    .attr('x', dms.innerWidth + 28)
                    .attr('y', 8)
                    .attr('dy', '0.32em')
                    .text(d=>d)

　　结束。

标签：const,attr,d3js,堆叠,柱状图,dms,data,d3,append
来源： https://www.cnblogs.com/gjw0818/p/16552544.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

d3js 堆叠柱状图