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

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

代码语言：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) .........完整代码请登录后点击上方下载按钮下载查看