d3实现圆球分布效果-html代码-BFW代码库

d3实现圆球分布效果

代码语言：html

所属分类：图表

代码描述：d3实现圆球分布效果

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

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

<style>
body {
    position: relative;
    margin-left:15px;
    background-color:#eee;
}
#circleBar-web-text,
#circleBar-mobile-text{
    font-family: 'FranklinGothic-Book' "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
    font-size:16px;
    fill:#000;
}
#circleBar-web-labels tspan,
#circleBar-mobile-labels tspan {
    font-family: 'FranklinGothic-Book' "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
    font-size:10px;
    fill:#6D6E71;
}

#circleBar-web-values tspan,
#circleBar-mobile-values tspan {
    font-family: 'FranklinGothic-Book' "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
    font-size: 9px;
    font-weight:bold;
    fill:#000;
}
#circleBar-web-values tspan {
    fill: #7D3A4D;
}
#circleBar-mobile-values tspan {
    fill: #684E88;
}
</style>

</head>
<body translate="no">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="724px" height="400px" overflow="visible" xml:space="preserve">
<g id="circleBarCharts">

<g id="circleBar-web-group" trans.........完整代码请登录后点击上方下载按钮下载查看