版权声明：虽然我依旧蒟蒻，但请你尊重我 ：D ——陈杉菜 https://blog.csdn.net/qq_44702847/article/details/88830236
我的第一个？
嗯 带坐标轴的丑陋且美丽的 条形图
——介绍完毕，接下来贴代码
我发现，我这个人，啥都不会，却啥都要学
氦，先学着吧
三天前？接触D3 js 啥都，不会，上学期学了点HTML了解了下CSS不知道算不算有点常识，硬着头皮，看了几页书，对着网站，敲的代码。
嗯，说说遇到的奇葩的事情：
- !一定一定要引用 d3.js 源文件嚯嚯嚯
- append 函数和 insert 函数插入元素的时候，谁在前面谁先搞事情，应该也算是个常识吧，我了解了（手动滑稽）另外，insert 不是inset!!
- 也不知道专业的术语叫什么，反正一行代码你敲完后一定要加分号，（不然他也不会报错，我找了好久呢，氦，心可真大，万分着急 氦溴）有头有尾鸭。还有js直接可以把好多个函数串起来，很神奇。
- 比例尺是个好东西，以后一定要熟练地敲出来
- 坐标轴这个东西要写在条形图的下面？我也不知道为什么，位置反了就不行了 汗- -||
效果图
（虽然很丑，但是是我亲手创造出来的）
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 300;
var height = 300;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var index = [0,1,2,3,4];
var color = ["red","blue","green","yellow","black"];
var ordinal = d3.scale.ordinal()
.domain(index)
.range(color);
var dataset = [1.2,2.3,0.9,1.5,3.3];
var min = d3.min(dataset);
var max = d3.max(dataset);
var linear = d3.scale.linear()
.domain([0,max])
.range([0,250]);
var rectHeight = 25;
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",20)
.attr("y",function(d,i){
return i*rectHeight;
})
.attr("width",function(d){
return linear(d);
})
.attr("height",rectHeight-5)
.attr("fill",function(d,i){
return ordinal(i);
});
var axis = d3.svg.axis()
.scale(linear)//指定比例尺
.orient("bottom")//刻度方向
.ticks(7);//刻度数量
svg.append("g")
.attr("class","axis")
.attr("transform","translate(20,130)")
.call(axis);
</script>
菜鸡需要仪式感
加油加油加油
突然变成柱形图
有些复杂起来了
但我知道
这才刚刚开始
嗯 继续努力啊陈杉
效果图
里面有些css的代码没有贴出来
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var rectPadding = 4;
var width =430;
var height =430;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var padding = {left:30,right:30,top:20,bottom:20};
var dataset = [20,10,33,12,30,5,40,24];
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0,width-padding.left-padding.right]);
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([height-padding.top-padding.bottom,0]);
var color = ["red","yellow","green","black","blue","gray","pink","purple"];
var colorScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.range(color);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var rectPadding = 4;
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class","MyRect")
.attr("transform","translate("+padding.left+","+padding.top+")")
.attr("x",function(d,i){
return xScale(i)+rectPadding/2;
})
.attr("y",function(d,i){
return yScale(d);
})
.attr("width",xScale.rangeBand()-rectPadding)
.attr("height",function(d){
return height-padding.top-padding.bottom-yScale(d);
})
.attr("fill",function(d,i){
return colorScale(i);
})
var texts = svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class","MyText")
.attr("transform","translate("+ padding.left+","+padding.top+")")
.attr("x",function(d,i){
return xScale(i)+rectPadding/2;
})
.attr("y",function(d){
return yScale(d);
})
.attr("dx",function(){
return (xScale.rangeBand()-rectPadding)/2;
})
.attr("dy",function(){
return 20;
})
.text(function(d){
return d;
});
svg.append("g")
.attr("class","axis")
.attr("transform","translate("+padding.left+","+(height-padding.bottom)+")")
.call(xAxis);
svg.append("g")
.attr("class","axis")
.attr("transform","translate("+padding.left+","+padding.top+")")
.call(yAxis);
</script>