在D3.js中缩放错误/轴错误

Question

我是D3的新手，并且一直在使用这些示例并使用这些示例更改我的代码，

下面是我的D3代码，除了条形图没有缩放之外它运行良好，我似乎不理解我的错误。

数据来自TSV文件，有2列，1-分类2-数字。

<script type = "text/javascript">

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


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.bottom+")");

d3.tsv("ticket.tsv",function(error, data) { 
dataset = data.map(function(d) { return [d["ticket"],+d["num"] ] ;})

var xScale  = d3.scale.ordinal()
.domain(data.map(function(d){ return [d.ticket];}))
.rangeRoundBands([0,width],0.1);

var yScale = d3.scale.linear()
.domain([0,d3.max(data,function(d) { return Math.max([d.num]);})])
.range([height, 0]);


var rect = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x",function(d,i) { return xScale(d.ticket);})
.attr("y",function (d) { return height - (yScale (d.num)) ;})
.attr("height",function (d) { return d.num;})
.attr("width",xScale.rangeBand())
.attr("fill","orange");

var xAxis  = d3.svg.axis()
            .scale(xScale)
            .orient("bottom");

var yAxis  = d3.svg.axis()
            .scale(yScale)
            .orient("left");

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

svg.append("g")
.attr("class", "axis")
.call(yAxis);
;});
</script>

Answer 1

以下是已解决的代码和图片，我已对我更正的代码进行了评论。

<script type = "text/javascript">

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


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.bottom+")");

d3.tsv("tickets.tsv",function(error, data) { 
dataset = data.map(function(d) { return [d["ticket"],+d["num"] ] ;})

var xScale  = d3.scale.ordinal()
.domain(data.map(function(d){ return [d.ticket];}))
.rangeRoundBands([0,width],0.1);

var yScale = d3.scale.linear()
.domain([0,d3.max(data,function(d) { return Math.max([d.num]);})])
.range([height,0]);


var rect = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x",function(d) { return xScale(d.ticket);})
.attr("y",function (d) { return yScale (d.num) ;})**//I made the change HERE** 
.attr("height",function (d) { return height - yScale(d.num);})**// and HERE**
.attr("width",xScale.rangeBand())
.attr("fill","orange");

var xAxis  = d3.svg.axis()
            .scale(xScale)
            .orient("bottom");

var yAxis  = d3.svg.axis()
            .scale(yScale)
            .orient("left");

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

svg.append("g")
.attr("class", "axis")
.call(yAxis);


;});

</script>