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--; ) {
            const e = d(i, o, h)
              , a = n(e);
            let s = l.get(a);
            s ? r && s.p(t, e) : (s = c(a, e)).c(),
            v.set(a, g[h] = s),
            a in p && $.set(a, Math.abs(h - p[a]))
        }
        const y = new Set
          , b = new Set;
        function w(e) {
            T(e, 1),
            e.m(a, u),
            l.set(e.key, e),
            u = e.first,
            f--
        }
        for (; m && f; ) {
            const t = g[f - 1]
              , n = e[m - 1]
              , r = t.key
              , i = n.key;
            t === n ? (u = t.first,
            m--,
            f--) : v.has(i) ? !l.has(r) || y.has(r) ? w(t) : b.has(i) ? m-- : $.get(r) > $.get(i) ? (b.add(r),
            w(t)) : (y.add(i),
            m--) : (s(n, l),
            m--)
        }
        for (; m--; ) {
            const t = e[m];
            v.has(t.key) || s(t, l)
        }
        for (; f; )
            w(g[f - 1]);
        return g
    }
    function I(e, n, o) {
        const {fragment: l, on_mount: a, on_destroy: s, after_update: c} = e.$$;
        l.m(n, o),
        C(()=>{
            const n = a.map(t).filter(i);
            s ? s.push(...n) : r(n),
            e.$$.on_mount = []
        }
        ),
        c.forEach(C)
    }
    function q(e, t) {
        e.$$.fragment && (r(e.$$.on_destroy),
        e.$$.fragment.d(t),
        e.$$.on_destroy = e.$$.fragment = null,
        e.$$.ctx = {})
    }
    function P(e, t) {
        e.$$.dirty || (k.push(e),
        B || (B = !0,
        F.then(L)),
        e.$$.dirty = n()),
        e.$$.dirty[t] = !0
    }
    function z(t, i, o, l, a, s) {
        const c = w;
        x(t);
        const u = i.props || {}
          , d = t.$$ = {
            fragment: null,
            ctx: null,
            props: s,
            update: e,
            not_equal: a,
            bound: n(),
            on_mount: [],
            on_destroy: [],
            before_update: [],
            after_update: [],
            context: new Map(c ? c.$$.context : []),
            callbacks: n(),
            dirty: null
        };
        let m = !1;
        var f;
        d.ctx = o ? o(t, u, (e,n,r=n)=>(d.ctx && a(d.ctx[e], d.ctx[e] = r) && (d.bound[e] && d.bound[e](r),
        m && P(t, e)),
        n)) : u,
        d.update(),
        m = !0,
        r(d.before_update),
        d.fragment = l(d.ctx),
        i.target && (i.hydrate ? d.fragment.l((f = i.target,
        Array.from(f.childNodes))) : d.fragment.c(),
        i.intro && T(t.$$.fragment),
        I(t, i.target, i.anchor),
        L()),
        x(c)
    }
    class D {
        $destroy() {
            q(this, 1),
            this.$destroy = e
        }
        $on(e, t) {
            const n = this.$$.callbacks[e] || (this.$$.callbacks[e] = []);
            return n.push(t),
            ()=>{
                const e = n.indexOf(t);
                -1 !== e && n.splice(e, 1)
            }
        }
        $set() {}
    }
    function R(t) {
        var n, r, i, o, l, u, d, f, h, p, g, $, y, w, x, k, _, S, M, F, B, C, L, j, O;
        return {
            c() {
                n = m("svg"),
                r = m("symbol"),
                i = m("g"),
                o = m("path"),
                l = m("symbol"),
                u = m("g"),
                d = m("g"),
                f = m("path"),
                h = m("circle"),
                p = m("path"),
                g = m("symbol"),
                $ = m("g"),
                y = m("path"),
                w = m("path"),
                x = m("path"),
                k = m("symbol"),
                _ = m("g"),
                S = m("g"),
                M = m("g"),
                F = m("path"),
                B = m("symbol"),
                C = m("g"),
                L = m("path"),
                j = m("path"),
                O = m("path"),
                v(o, "d", "M 50 35 v 30 m -15 -15 h 30"),
                v(i, "fill", "none"),
                v(i, "stroke", "currentColor"),
                v(i, "stroke-width", "7"),
                v(i, "stroke-linecap", "round"),
                v(r, "id", "add"),
                v(f, "d", "M -20 0 h -37.5 a 15 15 0 0 0 -15 15 v 42.5 a 15 15 0 0 0 15 15 h 42.5 a 15 15 0 0 0 15 -15 v -37.5"),
                v(h, "cx", "0"),
                v(h, "cy", "0"),
                v(h, "r", "20"),
                v(p, "stroke-width", "5"),
                v(p, "d", "M 0 -7 v 14 m -7 -7 h 14"),
                v(d, "transform", "translate(76 24)"),
                v(u, "fill", "none"),
                v(u, "stroke", "currentColor"),
                v(u, "stroke-width", "7"),
                v(u, "stroke-linecap", "round"),
                v(l, "id", "create"),
                v(y, "d", "M 50 35 h 20"),
                v(w, "d", "M 30 50 h 40"),
                v(x, "d", "M 30 65 h 20"),
                v($, "fill", "none"),
                v($, "stroke", "currentColor"),
                v($, "stroke-width", "7"),
                v($, "stroke-linecap", "round"),
                v(g, "id", "list"),
                v(F, "d", "M 0 -20 v 40 m -20 -20 h 40"),
                v(M, "fill", "none"),
                v(M, "stroke", "currentColor"),
                v(M, "stroke-width", "10"),
                v(M, "stroke-linecap", "round"),
                v(S, "transform", "rotate(45)"),
                v(_, "transform", "translate(50 50)"),
                v(k, "id", "delete"),
                v(L, "d", "M 35 65 v -7.5"),
                v(j, "d", "M 50 65 v -15"),
                v(O, "d", "M 65 65 v -30"),
                v(C, "fill", "none"),
                v(C, "stroke", "currentColor"),
                v(C, "stroke-width", "7"),
                v(C, "stroke-linecap", "round"),
                v(B, "id", "highlight"),
                v(n, "viewBox", "0 0 100 100"),
                v(n, "width", "40"),
                v(n, "height", "40"),
                b(n, "display", "none")
            },
            m(e, t) {
                s(e, n, t),
                a(n, r),
                a(r, i),
                a(i, o),
                a(n, l),
                a(l, u),
                a(u, d),
                a(d, f),
                a(d, h),
                a(d, p),
                a(n, g),
                a(g, $),
                a($, y),
                a($, w),
                a($, x),
                a(n, k),
                a(k, _),
                a(_, S),
                a(S, M),
                a(M, F),
                a(n, B),
                a(B, C),
                a(C, L),
                a(C, j),
                a(C, O)
            },
            p: e,
            i: e,
            o: e,
            d(e) {
                e && c(n)
            }
        }
    }
    class G extends D {
        constructor(e) {
            super(),
            z(this, e, null, R, o, [])
        }
    }
    const K = [];
    const V = d3.scaleOrdinal(d3.schemeTableau10);
    function J(e) {
        return e.sort((e,t)=>e.value < t.value ? 1 : -1).map(({name: e, value: t},n)=>({
            name: e,
            value: t,
            color: V(n)
        }))
    }
    const Q = function(t) {
        const {subscribe: n, set: r, update: i} = function(t, n=e) {
            let r;
            const i = [];
            function l(e) {
                if (o(t, e) && (t = e,
                r)) {
                    const e = !K.length;
                    for (let e = 0; e < i.length; e += 1) {
                        const n = i[e];
                        n[1](),
                        K.push(n, t)
                    }
                    if (e) {
                        for (let e = 0; e < K.length; e += 2)
                            K[e][0](K[e + 1]);
                        K.length = 0
                    }
                }
            }
            return {
                set: l,
                update: function(e) {
                    l(e(t))
                },
                subscribe: function(o, a=e) {
                    const s = [o, a];
                    return i.push(s),
                    1 === i.length && (r = n(l) || e),
                    o(t),
                    ()=>{
                        const e = i.indexOf(s);
                        -1 !== e && i.splice(e, 1),
                        0 === i.length && (r(),
                        r = null)
                    }
                }
            }
        }(t);
        return {
            subscribe: n,
            create: (e,t)=>i(n=>J(n = [...n, {
                name: e,
                value: t
            }])),
            update: (e,t)=>i(n=>{
                const r = n.findIndex(t=>t.name === e);
                return n[r].value += t,
                J(n)
            }
            ),
            delete: e=>i(t=>{
                const n = t.findIndex(t=>t.name === e);
                return J(t = [...t.slice(0, n), ...t.slice(n + 1)])
            }
            )
        }
    }(J([{
        name: "Apples",
        value: 10
    }, {
        name: "Grapes",
        value: 18
    }, {
        name: "Peaches",
        value: 15
    }, {
        name: "Bananas",
        value: 5
    }]));
    function U(e, t, n) {
        const r = Object.create(e);
        return r.item = t[n],
        r
    }
    function W(e, t) {
        var n, r;
        return {
            key: e,
            first: null,
            c() {
                (n = d("option")).__value = r = t.item.name,
                n.value = n.__value,
                this.first = n
            },
            m(e, t) {
                s(e, n, t)
            },
            p(e, t) {
                e.$items && r !== (r = t.item.name) && (n.__value = r),
                n.value = n.__value
            },
            d(e) {
                e && c(n)
            }
        }
    }
    function X(t) {
        var n, i, o, l, u, m, f, p, $, b, w, x, k, _, S, M, F, B, C, L = [], j = new Map, O = !1;
        let E = t.$items;
        const T = e=>e.item.name;
        for (let e = 0; e < E.length; e += 1) {
            let n = U(t, E, e)
              , r = T(n);
            j.set(r, L[e] = W(r, n))
        }
        function A() {
            O = !0,
            t.input1_input_handler.call(M)
        }
        return {
            c() {
                n = d("section"),
                (i = d("h2")).innerHTML = '<span><svg viewBox="0 0 100 100" width="40" height="40"><use href="#add"></use></svg></span>\n\t\t\t        Add Items\n\t\t\t    ',
                o = h(),
                l = d("form"),
                u = d("label"),
                (m = d("span")).textContent = "Key",
                f = h(),
                p = d("input"),
                b = h(),
                w = d("datalist");
                for (let e = 0; e < L.length; e += 1)
                    L[e].c();
                var e;
                x = h(),
                k = d("label"),
                (_ = d("span")).textContent = "Value",
                S = h(),
                M = d("input"),
                F = h(),
                (B = d("button")).innerHTML = '<span id="description" hidden>Add the key value pair to the list of items</span> <svg viewBox="0 0 100 100" width="40" height="40" class="svelte-12oa6ic">&l.........完整代码请登录后点击上方下载按钮下载查看