Javascript JS d3条形图不显示数据
我正在尝试使用D3JS库创建一个条形图。 我曾试图实现代码,但代码略有改动,但没有成功 下面是我的完整代码示例:Javascript JS d3条形图不显示数据,javascript,html,d3.js,Javascript,Html,D3.js,我正在尝试使用D3JS库创建一个条形图。 我曾试图实现代码,但代码略有改动,但没有成功 下面是我的完整代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bar Chart</title> <!-- Reference style.css --
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bar Chart</title>
<!-- Reference style.css -->
<link rel = "stylesheet" type="text/css" href="style.css">
<!-- Reference minified version of D3 -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="barplot" style='width: 600px; height: 500px; padding-left: 5px;'></div>
<script>
var width = 400, height = 350;
var margin = {top: 20, right: 20, left: 40, bottom: 20};
var svg2 = d3.select("#barplot").append("svg")
.append("g")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
createBarPlot();
updateBarPlot();
function createBarPlot(){
svg2.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)" );
svg2.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Cn0");
}
function updateBarPlot(){
// Create data array of values to visualize
var Cn0 = [{"sat": 2, "val": 15}, {"sat": 4, "val": 20}, {"sat": 10, "val": 11}];
x.domain(Cn0.map(function(d) { return d.sat;}));
y.domain([0, d3.max(Cn0, function(d) { return d.val;})]);
svg2.selectAll("bar")
.data(Cn0)
.enter().append("rect")
.style("fill", "steelblue")
.attr("x", function(d) { return x(d.sat);})
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.val);})
.attr("height", function(d) { return height - y(d.value);});
}
</script>
</body>
</html>
当我运行它时,我能够为条形图创建轴,但在图表上看不到任何数据。
我怀疑问题出在updateBarPlot方法中,但我不知道它出了什么问题。
你知道如何解决这个问题吗?任何帮助都将不胜感激。多谢各位 就x轴和y轴域的标记而言,应在设置相应域后调用轴,即在updateBarPlot函数中设置域后调用callxAxis和callyAxis,如下所示:
x.domain(Cn0.map(function(d) { return d.sat;}));
y.domain([0, d3.max(Cn0, function(d) { return d.val;})]);
svg2.select('.x.axis')
.call(xAxis);
svg2.select('.y.axis')
.call(yAxis);
此外,我还为轴的路径和记号添加了一些样式:
<style>
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
下面是一个片段,结合了上述内容和@Gerardo在评论中提到的拼写错误修复:
条形图
.安讯士{
字体:10px无衬线;
}
.轴线路径,
.轴线{
填充:无;
中风:000;
形状渲染:边缘清晰;
}
变量宽度=400,高度=350;
var-margin={顶部:20,右侧:20,左侧:40,底部:20};
var svg2=d3.selectbarplot.appendsvg
.attrwidth,width+margin.left+margin.right
.attrhight,height+margin.top+margin.bottom
.附录
.attransform,translate+margin.left+,+margin.top+;
var x=d3.标度.顺序.范围圆带[0,宽度],.05;
变量y=d3.刻度.线性.范围[高度,0];
var xAxis=d3.svg.axis
scalex先生
.定向底部;
var yAxis=d3.svg.axis
斯卡利先生
奥林特夫特先生
.滴答声10;
创建条形图;
updateBarPlot;
函数createBarPlot{
svg2.appendg
.attrclass,x轴
.attransform,translate0,+高度+;
svg2.appendg
.属性类,y轴
.附录文本
.attransform,旋转-90
.attry,6岁
.attrdy,.71em
.styletext锚定,结束
.textCn0;
}
函数updateBarPlot{
//创建要可视化的值的数据数组
var Cn0=[{sat:2,val:15},{sat:4,val:20},{sat:10,val:11}];
x、 domainCn0.mapfunctiond{return d.sat;};
y、 域[0,d3.maxCn0,函数d{return d.val;}];
svg2.选择“.x.axis”
.callxAxis;
svg2.选择“.y.轴”
.callyAxis;
svg2.selectAllbar
.dataCn0
.enter.appendrect
.stylefill,钢蓝
.attrx,函数d{return xd.sat;}
.attrwidth,x.rangeBand
.attry,函数d{return yd.val;}
.attrheight,函数为{返回高度-yd.val;};
}
对于钢筋的高度,它应该是yd.val,而不是yd.value。我认为这只是一个类型错误。它能解决整体问题吗?你没试过吗?只是试过了。它修复了我看不到任何数据的部分,谢谢你。但是,我没有看到x轴和每个条下的标签,y轴的域在0-1之间,而不是在0和最大值之间。