TXT文件中的数据格式为
10,66,45,23,90,
代码如下,应该是读取数据的问题,因为自己换一个数组就可以运行<html>  
<head>  
<meta charset="utf-8">  
<title>完整的柱形图</title>  
</head> <style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
} .axis text {
font-family: sans-serif;
font-size: 11px;
} .MyRect {
fill: steelblue;
} .MyText {
fill: white;
text-anchor: middle;
}
</style><body>   <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
<script>

var fso = new ActiveXObject("Scripting.FileSystemObject");
var f = fso.OpenTextFile("D:\duqu.txt",1);
var s = "";
while (!f.AtEndOfStream)
s = f.ReadLine();
f.Close();
var str1 = s.toString().split(",");
var array = [];
str1.forEach(function(data,index,arr){
array.push(+data);
});

//定义一个数组
var dataset= array;

//画布大小
var width = 400;
var height = 400; //在 body 里添加一个 SVG 画布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height); //画布周边的空白
var padding = {left:30, right:30, top:20, bottom:20};



//x轴的比例尺
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, width - padding.left - padding.right]); //y轴的比例尺
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0]); //定义x轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");

//定义y轴
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){
return yScale(d);
})
.attr("width", xScale.rangeBand() - rectPadding )
.attr("height", function(d){
return height - padding.top - padding.bottom - yScale(d);
}); //添加文字元素
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(d){
return 20;
})
.text(function(d){
return d;
}); //添加x轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis); 

//添加y轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);</script>  
</body>  
</html>  

解决方案 »

  1.   

    new ActiveXObject("Scripting.FileSystemObject");这个对象只能在安全级别设置为极低的情况下才允许使用,并且只有ie浏览器支持
    你可以用这个读取用户选择的文本文件(必须用户选择了文件才能读取,不能由网页中设置)<!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
    </head>
    <body>
    如果是客户端用户的文件,就需要用户选择文件得以受权后才能读取。<input type="file" id='file' onchange="opentext()"><br />
    <textarea id="test" rows="20" cols="50">
    </textarea>
    <script type="text/javascript">
    function opentext() {
    var f=document.getElementById('file').files[0];
    var r= new FileReader();
    r.onload=function() {
    document.getElementById('test').value=this.result;
    };
    r.readAsText(f,"UTF-8");//"UTF-8"是读取文件的文件编码,也可以是"GB2312"。
    }
    </script>
    </body>
    </html>
      

  2.   

    如果这个txt文件和你的网页在同一个服务器上可以用ajax方式读取