d3实现堆叠柱状图图表效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：d3实现堆叠柱状图图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	background: hsl(0, 0%, 97%);
	color: hsl(0, 0%, 7%);
	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
		helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
}

#root {
	max-width: 52rem;
	margin: 1rem auto;
	padding: 1rem;
}

#root > * + * {
	margin-top: 0.75em;
}

h1 {
	font-size: 1.43rem;
}

.chart {
	display: block;
}

.chart .axis-y path {
	opacity: 0;
}

.chart .axis-y text {
	color: hsl(0, 0%, 25%);
	font-size: 0.8rem;
	font-weight: 700;
}

.chart .axis-x path {
	color: hsl(0, 0%, 57%);
}

.chart .axis-x text {
	color: hsl(0, 0%, 37%);
	font-size: 0.6rem;
	font-weight: 700;
}

form {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap: 0.5rem;
}

label {
	color: hsl(0, 0%, 25%);
	cursor: pointer;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0 0.5rem;
}

label input {
	width: 1em;
	height: 1em;
	opacity: 0;
}

label svg {
	display: block;
	width: 1em;
	height: 1em;
	top: 0;
	right: 0;
	position: absolute;
}
</style>



</head>

<body >
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.7.7.0.js"></script>
      <script >
const stackedBarChartComponent = () => {
  // prettier-ignore
  let data = [
  { apples: 3840, bananas: 1920, cherries: 960, durians: 400 },
  { apples: 1600, bananas: 1440, cherries: 960, durians: 400 },
  { apples: 640, bananas: 960, cherries: 640, durians: 400 },
  { apples: 320, bananas: 480, cherries: 640, durians: 400 }];

  let keys = Object.keys(data[0]);
  let xAccessor = (_, i) => i;
  let xFormat = d => d;
  let valueFormat = d => d;
  let colorScale = d3.scaleOrdinal(d3.schemeSet2).domain(keys);
  let width = 500;
  let height = 250;

  const stack = d3.stack();
  const xScale = d3.scaleBand().padding(0.4);
  const yScale = d3.scaleLinear();

  const xAxis = d3.axisBottom(xScale).tickSize(0).tickPadding(10);
  const yAxis = d3.axisLeft(yScale).ticks(4).tickSize(0).tickPadding(6);

  const stackedBarChartComponent = context => {
    const series = stack.keys(keys)(data);

    const selection = context.selection ? context.selection() : context;

    xScale.domain(data.map(xAccessor)).range([0, width]);

    yScale.
    domain([0, d3.max(series[series.length - 1], d => d[1])]).
    range([height, 0]);

    xAxis.tickFormat(d => xFormat(d));
    yAxis.tickFormat(d => valueFormat(d));

    let groupXAxis = selection.selectAll("g.axis-x").data([null]);
    let groupYAxis = selection.selectAll("g.axis-y").data([null]);
    let groupsSeries = selection.selectAll("g.series").data(series, d => d.key);

    groupXAxis = groupXAxis.merge(
    groupXAxis.
    enter().
    append("g").
    attr("class", "axis-x").
    attr("transform", `translate(0 ${height})`));


    groupYAxis = groupYAxis.merge(
    groupYAxis.enter().append("g").attr("class", "axis-y"));


    const groupsSeriesEnter = groupsSeries.
    enter().
    append("g").
    attr("class", "series").
    attr("fill", d => colorScale(d.key));

    let groupsSeriesExit = groupsSeries.exit();

    if (context !== selection) {
      selection.selectAll("*").interrupt();

      groupXAxis = groupXAxis.transition(context);
      groupYAxis = groupYAxis.transition(context);

      groupsSeriesEnter.
      selectAll("rect").
      data(d => d).
      enter().
      append("rect").
      attr("x", (d, i) => xScale(xAccessor(d.data, i))).
      attr("width", xScale.bandwidth()).
      attr("y", height).
      attr("height", "0").
      transition(context).
      attr("y", d => yScale(d[1])).
      attr("height", d => yScale(d[0]) - yScale(d[1]));

      groupsSeries.
      selectAll("rect").
      data(d => d).
      join(
      enter => {
        enter.
        append("rect").
        attr("x", (d, i) => xScale(xAccessor(d.data, i))).
        attr("width", xScale.bandwidth()).
        attr("y", height).
        attr("height", "0").
        transition(context).
        attr("y", d => yScale(d[1])).
        attr("height", d => yScale(d[0]) - yScale(d[1]));
      },
      update => {
        update.
        transition(context).
        attr("x", (d, i) => xScale(xAccessor(d.data, i))).
        attr("width", xScale.bandwidth()).
        attr("y", d => yScale(d[1])).
        attr("height", d => yScale(d[0]) - yScale(d[1]));
      },
      exit => {
        exit.transition(context).attr("y", height).attr("height", "0").remove();
      });


      groupsSeriesExit.
      selectAll("rect").
      transition(context).
      attr("y", height).
      attr("height", "0");

      groupsSeriesExit = groupsSeriesExit.transition(context);
    } else {
      groupsSeriesEnter.
      selectAll("rect").
      data(d => d).
      enter().
      append("rect").
      attr("x", (d, i) => xScale(xAccessor(d.data, i))).
      attr("width", xScale.bandwidth()).
      attr("y", d => yScale(d[1])).
      attr("height", d => yScale(d[0]) - yScale(d[1]));

      groupsSeries.
      selectAll("rect").
      data(d => d).
      join(
      enter => {
        enter.
        append("rect").
        attr("x", (d, i) => xScale(xAccessor(d.data, i))).
        attr("width", xScale.bandwidth()).
        attr("y", d => yScale(d[1])).
        attr("height", d => yScale(d[0]) - yScale(d[1]));
      },
      update => {
        update.
        attr("x", (d, i) => xScale(xAccessor(d.data, i))).
        attr("width", xScale.bandwidth()).
        attr("y", d => yScale(d[1])).
        attr("height", d => yScale(d[0]) - yScale(d[1]));
      },
      exit => {
        exit.remove();
      });


      groupsSeriesExit.selectAll("rect").remove();
    }

    groupsSeriesExit.remove();

    groupXAxis.call(xAxis);
    groupYAxis.call(yAxis);
  };

  stackedBarChartComponent.data = function (array) {
    if (!arguments.length) return data;

    data = array;
    return this;
  };

  stackedBarChartComponent.keys = function (array) {
    if (!arguments.length) return keys;

    keys = array;
    return this;
  };

  stackedBarChartComponent.xAccessor = function (fn) {
    if (!arguments.length) return xAccessor;

    xAccessor = fn;
    return this;
  };

  stackedBarChartComponent.xFormat = function (fn) {
    if (!arguments.length) return xFormat;

    xFormat = fn;
    return this;
  };

  stackedBarChartComp.........完整代码请登录后点击上方下载按钮下载查看