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" transform="translate(0,0)">
<image id="circleBar-web-icon" opacity="0" x="166" y="112" overflow="visible" width="98" height="77" xlink:href="http://www.frank-designs.com/images/icon_web.png" />
<text id="circleBar-web-text" opacity="0" x="200" y="143">WEB</text>
<g id="circleBar-web-chart" transform="translate(215,150)"></g>
<clippath id="circleBar-web-clipPath">
<rect id="circleBar-web-clipLabels" x="205" y="215" width="180" height="0"></rect>
</clippath>
<g id="circleBar-web-legend" clip-path="url(#circleBar-web-clipPath)">
<text id="circleBar-web-values" transform="translate(222,225)"></text>
<text id="circleBar-web-labels" transform="translate(277,225)"></text>
</g>
</g>


<g id="circleBar-mobile-group" transform="translate(362,0)">
<image id="circleBar-mobile-icon" opacity="0" x="195" y="112" overflow="visible" width="40" height="77" xlink:href="http://www.frank-designs.com/images/icon_mobile.png" />
<text id="circleBar-mobile-text" opacity="0" x="187" y="155">MOBILE</text>
<g id="circleBar-mobile-chart" transform="translate(215,150)"></g>
<clippath id="circleBar-mobile-clipPath">
<rect id="circleBar-mobile-clipLabels" x="205" y="215" width="150" height="0"></rect>
</clippath>
<g id="circleBar-mobile-legend" clip-path="url(#circleBar-mobile-clipPath)">
<text id="circleBar-mobile-values" transform="translate(222,225)"></text>
<text id="circleBar-mobile-labels" transform="translate(277,225)"></text>
</g>
</g>

</g>
</svg>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/d3.v3.js"></script>
<script >
var chartData = {
  "barCircleMobile": [
  { "index": 0.3, "value": 17436920, "fill": "#231F20", "label": "WebMd Health" },
  { "index": 0.4, "value": 10884799, "fill": "#494551", "label": "Livestrong.com" },
  { "index": 0.5, "value": 10257432, "fill": "#564965", "label": "Everyday Health" },
  { "index": 0.6, "value": 6110024, "fill": "#574270", "label": "About.com" },
  { "index": 0.7, "value": 3895612, "fill": "#4D2D77", "label": "Drugs.com" },
  { "index": 0.8, "value": 3414585, "fill": "#684E88", "label": "Alliance Health" },
  { "index": 0.9, "value".........完整代码请登录后点击上方下载按钮下载查看