D3js可视化 提 问 未 解 答 新手级别pop2010条形图打开方式

前面写了虚假的可视化

现在告诉你真正的打开方式

毕竟我可是打了一天

这效率
可太低了

不过!

!!!!!!!!!!!
敲代码遇到很多问题
才是正确打开方式啊
!!!!!!!!!!!

接下来看我是怎么做到用将近一天的时间把这个看起来简单其实也简单的条形图做出来的
效果图和之前一样

但它的内在已经发生改变了
形容一下可能就是:
惊天动地的进化

给你看给你看

D3js可视化 提 问 未 解 答 新手级别pop2010条形图打开方式
就是这样,这就是效果图
可以看看图标,我觉得肥肠满意

首先

对着昨天(之前)的虚假可视化代码
----------------------------------------------------Sublime Text3多屏操作---------------------------------------------
D3js可视化 提 问 未 解 答 新手级别pop2010条形图打开方式
我先把文字啥的加进去
矩形,比例尺,坐标轴先放在后面
css样式表和昨天的一样不变

然后

开始我的画布之旅
艰辛+苦涩.jpg
刚开始打的时候,因为之前照着网站打过,又看到书上这句话
D3js可视化 提 问 未 解 答 新手级别pop2010条形图打开方式
应该是我还没有理解吧。。。
于是我开始
肆意发挥
我的代码变成了这个样子
D3js可视化 提 问 未 解 答 新手级别pop2010条形图打开方式
为了起到震撼的效果,我把字体变到最小
其实刚开始啥变量都没加

var svg = body.append("svg");

var body = d3.select("body");

就这两家伙打 天 下 ,一直append就完事了
运行出来:一 片 空 白 cool

到现在我还不知道错哪了我真傻,希望好心人告诉我一下,十分感谢

再然后

1.就重新跟着书上 先把所有的东西加好

改改改

2.用变量

接着改改改

到这里勉强过了很久吧,放张图,因为痕迹还留着嘻嘻,
要有存在的价值
D3js可视化 提 问 未 解 答 新手级别pop2010条形图打开方式
大致就是这样,除了矩形循环的那块代码
当时为了方便随便起的名字,来自菜鸡的草率

3.用循环

继续改改改

4.不用除了零以外的数字

还要改改改

另外,呃,在矩形那块我是直接先用了循环,
17组数据呢!太可怕了!我选择循环!我爱他!
必须大声说出来,我是自己写的啊哈哈哈哈
一次过啊哈哈哈哈哈哈哈哈哈哈哈哼哈哈哈

接下来 是遇到的错误

大致上就是stroke少了r啊
或者是分!号!没!有!加!啊!
或者是类名抄错了啊
或者是x,y的属性搞反了啊
或者是数组引用错误了啊
…… ……
路子比较野,错误比较傻
无碍 我菜给自己看
哼哼哼

反正

效果总算是出来了

最后贴代码?
我考虑一下
下次见吧哈哈哈哈
改天放上来呗,反正我也不火,我拖拖=稳妥妥