版权声明：虽然我依旧蒟蒻，但请你尊重我 ：D ——陈杉菜 https://blog.csdn.net/qq_44702847/article/details/88889756
前面讲到
菜菜菜到爆炸的我开始接触js这个很酷的东西
结果我 嗯 没有体会到 数据的沉重感，于是我，开始了懵懂的探索
嗯嗯嗯 我直接 跳过了一些东西
里面直接加入svg标签直接加入rect元素，直接用比例尺，加坐标系，按着源码敲
但还是经常敲错
我找错误的方法也比较愚蠢
就是拷正确的代码，再对比自己敲的代码
花太多时间 但是找出错误来了 就是好方法
氦 菜是原罪
我可以！
我能行！
所以我在图书馆里找了本书
重新 弄了一个看起来高大上其实和D3js没啥直接关系，只是带了可视化帽子的一个示例
讲的是2010年世界人口分布
如图
嗯 非常好看，至少看起来专业多了
为了让它看起来更酷，我还加了个网页图标
这个自行百度吧，很简单的
其实源码也很简单（白痴）
无奈水平有限，浪费您的阅读时间了OMG
CSS样式表+HTML好像就可以实现了 就是把所有的属性值一股脑都设置好 即可
CSS样式表
<style type="text/css">
body{
font-family: Helvetica;
}
svg{
width: 500px;
height:500px;
}
.top-label{
font-size: 13px;
font-style: italic;
text-transform: uppercase;;
float: left;
}
.age-label
{
text-align: right;
font-weight: bold;
width:90px;
padding-right: 10px;
}
.clearfix{
clear: both;
}
.bar{
fill:DarkSlateBlue;
}
.bar-label{
text-anchor: end;
}
.axis-label{
text-anchor: middle;
font-size: 13px;
}
</style>
数据和属性设定
<h2>Age distribution of the world,2010</h2>
<div class="top-label age-label">
<p>age group</p>
</div>
<div class="top-label">
<p>portion of the population</p>
</div>
<div class="clearfix"></div>
<svg>
<g transform="translate(100,30) scale(43.1,1)" class="bar">
<rect x="0" y="0" height="20" width="1.6"/>
<rect x="0" y="25" height="20" width="1.5"/>
<rect x="0" y="50" height="20" width="2.1"/>
<rect x="0" y="75" height="20" width="2.6"/>
<rect x="0" y="100" height="20" width="3.4"/>
<rect x="0" y="125" height="20" width="4.5"/>
<rect x="0" y="150" height="20" width="5.1"/>
<rect x="0" y="175" height="20" width="6.0"/>
<rect x="0" y="200" height="20" width="6.6"/>
<rect x="0" y="225" height="20" width="7.1"/>
<rect x="0" y="250" height="20" width="7.3"/>
<rect x="0" y="275" height="20" width="8.1"/>
<rect x="0" y="300" height="20" width="8.9"/>
<rect x="0" y="325" height="20" width="8.8"/>
<rect x="0" y="350" height="20" width="8.6"/>
<rect x="0" y="375" height="20" width="8.8"/>
<rect x="0" y="400" height="20" width="9.3"/>
</g>
<g class="bar-label" transform="translate(90)">
<text x="0" y="45" >80 and up</text>
<text x="0" y="70" >75-79</text>
<text x="0" y="95" >70-74</text>
<text x="0" y="120" >64-69</text>
<text x="0" y="145" >60-64</text>
<text x="0" y="170" >55-59</text>
<text x="0" y="195" >50-54</text>
<text x="0" y="220" >45-49</text>
<text x="0" y="245" >40-44</text>
<text x="0" y="270" >35-39</text>
<text x="0" y="295" >30-34</text>
<text x="0" y="320" >25-29</text>
<text x="0" y="345" >20-24</text>
<text x="0" y="370" >15-19</text>
<text x="0" y="395" >10-14</text>
<text x="0" y="420" >5-9</text>
<text x="0" y="445" >0-4</text>
</g>
<g transform ="translate(100,30)" stroke="black">
<line x1="0" y1="0" x2="0" y2="-10"/>
<line x1="107.75" y1="0" x2="107.75" y2="-10"/>
<line x1="215.5" y1="0" x2="215.5" y2="-10"/>
<line x1="323.25" y1="0" x2="323.35" y2="-10"/>
</g>
<g transform ="translate(100,30)" class="axis-label">
<text x="0" y="-15">0</text>
<text x="107.75" y="-15">2.5%</text>
<text x="215.5" y="-15">5%</text>
<text x="325.35" y="-15">7.5%</text>
</g>
</svg>