d3实现水果分类计数统计饼状图效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：d3实现水果分类计数统计饼状图效果代码，选择水果类型，输入数值，进行汇总统计。

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    @import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap");

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

body {
    color: hsl(240, 25%, 95%);
    background: hsl(240, 25%, 20%);
    font-family: "IBM Plex Mono", monospace;
}
/* absolute position the span in the top left corner of each heading */
h2 {
    position: relative;
    font-size: 1.85rem;
    padding: 0.25rem;
    font-weight: 400;
}
h2 span {
    position: absolute;
    top: 0%;
    right: 100%;
    transform: translateY(-50%);
    display: block;
    width: 1.25em;
    height: 1.25em;
    border-radius: 0.75rem;
    background: hsla(240, 25%, 50%, 0.3);
}
h2 span svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 3px hsla(240, 25%, 0%, 0.5));
}

.app > * + * + * {
    margin-top: 5rem;
}
section > * + * {
    margin-top: 1rem;
}

.app.svelte-bshi3b{max-width:900px;width:80vw;margin:2rem auto}
form.svelte-12oa6ic{display:flex;flex-wrap:wrap;align-items:center;color:hsl(240, 25%, 20%);background:hsla(240, 25%, 95%, 1);padding:0.75rem 1rem;border-radius:5px}form.svelte-12oa6ic label.svelte-12oa6ic{flex-grow:1;display:flex;flex-direction:column;font-size:1rem;line-height:2}form.svelte-12oa6ic label input.svelte-12oa6ic{font-size:1.1rem;color:inherit;font-family:inherit;background:none;border:none;padding:0.5rem 0.75rem;border-left:0.25rem solid currentColor}form.svelte-12oa6ic button.svelte-12oa6ic{background:none;border:none;color:inherit;width:3rem;height:3rem;padding:0.25rem;margin:0.25rem 0}form.svelte-12oa6ic button svg.svelte-12oa6ic{display:block;width:100%;height:100%}
main.svelte-m9wvyg{display:grid;justify-content:center;grid-template-columns:repeat(auto-fill, 150px);grid-auto-rows:150px;grid-gap:2rem}article.svelte-m9wvyg{display:flex;flex-direction:column;justify-content:center;align-items:center;background:hsla(240, 25%, 50%, 0.1);border:5px solid currentColor;border-radius:25px;position:relative}article.svelte-m9wvyg h2.svelte-m9wvyg{font-weight:400;font-size:1.25rem}article.svelte-m9wvyg p.svelte-m9wvyg{font-size:2.25rem;font-weight:700}article.svelte-m9wvyg button.svelte-m9wvyg{position:absolute;top:0%;right:0%;transform:translate(50%, -50%);background:none;border:none;border-radius:50%;width:1.5rem;height:1.5rem;color:inherit;background:currentColor;box-shadow:0 0 0 0.5rem hsl(240, 25%, 20%)}article.svelte-m9wvyg button svg.svelte-m9wvyg{display:block;width:100%;height:100%;color:hsl(240, 25%, 20%)}
div.svelte-1ljjwhb{display:flex;justify-content:space-around;flex-wrap:wrap;align-items:center}
</style>
</head>
<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.v5.js"></script>
  
  <script  >
      
      var app = function() {
    "use strict";
    function e() {}
    function t(e) {
        return e()
    }
    function n() {
        return Object.create(null)
    }
    function r(e) {
        e.forEach(t)
    }
    function i(e) {
        return "function" == typeof e
    }
    function o(e, t) {
        return e != e ? t == t : e !== t || e && "object" == typeof e || "function" == typeof e
    }
    function l(e, t, n) {
        e.$$.on_destroy.push(function(e, t) {
            const n = e.subscribe(t);
            return n.unsubscribe ? ()=>n.unsubscribe() : n
        }(t, n))
    }
    function a(e, t) {
        e.appendChild(t)
    }
    function s(e, t, n) {
        e.insertBefore(t, n || null)
    }
    function c(e) {
        e.parentNode.removeChild(e)
    }
    function u(e, t) {
        for (let n = 0; n < e.length; n += 1)
            e[n] && e[n].d(t)
    }
    function d(e) {
        return document.createElement(e)
    }
    function m(e) {
        return document.createElementNS("http://www.w3.org/2000/svg", e)
    }
    function f(e) {
        return document.createTextNode(e)
    }
    function h() {
        return f(" ")
    }
    function p() {
        return f("")
    }
    function g(e, t, n, r) {
        return e.addEventListener(t, n, r),
        ()=>e.removeEventListener(t, n, r)
    }
    function v(e, t, n) {
        null == n ? e.removeAttribute(t) : e.setAttribute(t, n)
    }
    function $(e, t) {
        t = "" + t,
        e.data !== t && (e.data = t)
    }
    function y(e, t) {
        (null != t || e.value) && (e.value = t)
    }
    function b(e, t, n, r) {
        e.style.setProperty(t, n, r ? "important" : "")
    }
    let w;
    function x(e) {
        w = e
    }
    const k = []
      , _ = []
      , S = []
      , M = []
      , F = Promise.resolve();
    let B = !1;
    function C(e) {
        S.push(e)
    }
    function L() {
        const e = new Set;
        do {
            for (; k.length; ) {
                const e = k.shift();
                x(e),
                j(e.$$)
            }
            for (; _.length; )
                _.pop()();
            for (let t = 0; t < S.length; t += 1) {
                const n = S[t];
                e.has(n) || (n(),
                e.add(n))
            }
            S.length = 0
        } while (k.length);
        for (; M.length; )
            M.pop()();
        B = !1
    }
    function j(e) {
        e.fragment && (e.update(e.dirty),
        r(e.before_update),
        e.fragment.p(e.dirty, e.ctx),
        e.dirty = null,
        e.after_update.forEach(C))
    }
    const O = new Set;
    let E;
    function T(e, t) {
        e && e.i && (O.delete(e),
        e.i(t))
    }
    function A(e, t, n, r) {
        if (e && e.o) {
            if (O.has(e))
                return;
            O.add(e),
            E.c.push(()=>{
                O.delete(e),
                r && (n && e.d(1),
                r())
            }
            ),
            e.o(t)
        }
    }
    function H(e, t) {
        e.d(1),
        t.delete(e.key)
    }
    function N(e, t, n, r, i, o, l, a, s, c, u, d) {
        let m = e.length
          , f = o.length
          , h = m;
        const p = {};
        for (; h--; )
            p[e[h].key] = h;
        const g = []
          , v = new Map
          , $ = new Map;
        for (h = f; h--; .........完整代码请登录后点击上方下载按钮下载查看