我正在研究d3.js.爲什麼這段代碼無法正常工作？

這就是CSV文件：http://goo.gl/ZVVjD 我正在研究d3.js.爲什麼這段代碼無法正常工作？

我只有這個問題的條形圖。折線圖工作正常。我不知道如何修改這個。

請幫我明白的地方，我錯了。

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

body { 
    font: 10px sans-serif; 
} 

.axis path, 
.axis line { 
fill: none; 
stroke: #000; 
shape-rendering: crispEdges; 
} 

.bar { 
fill: steelblue; 
} 

.x.axis path { 
    display: none; 
} 

</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
width = 960 - margin.left - margin.right, 
height = 500 - margin.top - margin.bottom; 

//var formatPercent = d3.format("04d"); 
//var formatPercent = d3.format(".0%"); 
var parseDate = d3.time.format("%d-%b-%y-%H:%M:%S").parse; 

var x = d3.time.scale() 
.range([0, width]); 

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") 
//.tickFormat(formatPercent); 

var svg = d3.select("body").append("svg") 
.attr("width", width + margin.left + margin.right) 
.attr("height", height + margin.top + margin.bottom) 
.append("g") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.csv("data.tsv", function(error, data) { 

    data.forEach(function(d) { 
     d.date = parseDate(d.date); 
     //d.energy = parseInt(d.energy); 
     d.energy = +d.energy; 
    }); 

    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain([0, d3.max(data, function(d) { return d.energy; })]); 
    //y.domain(d3.extent(data, function(d) { return d.energy; })); 

    svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

    svg.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("Energy"); 

    svg.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return x(d.date); }) 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { return y(d.energy); }) 
    .attr("height", function(d) { return height - y(d.energy); }); 
}); 

</script>

非常感謝！

來源

2013-03-19 Daniele Costarella

什麼工作不更換呢？ – 2013-03-19 19:10:48

嗨，它正確地查看軸但不是酒吧 – 2013-03-19 19:23:32

我不相信x.rangeBand()作品的時間尺度。嘗試用2的固定像素值或3

來源

2013-03-19 20:07:57

:)謝謝！那就是問題所在！這是我在Stackoverflow上的第一個問題。非常感謝你。 – 2013-03-19 20:15:43

我正在研究d3.js.爲什麼這段代碼無法正常工作？

回答

相關問題