我有以下代码:
var dados = [
["Brasil", 20],
["Canadá", 31],
["Japão", 29],
["USA", 126],
["Inglaterra", 81],
["Nova Zelândia", 25],
["Turquia", 34]
];
dados.sort(function(a, b) { return b[1] - a[1]; });
/* Chart Area */
var chart = d3.select("body").append("svg")
.attr("class", "grafico")
.attr("width", 700)
.attr("height",300);
/* Define X-axis */
var x = d3.scale.linear()
.domain([0, d3.max(dados)[1] ])
.range([0, 500]);
/* Define Y-axis */
var domainY = dados.map(function(d) {return d[0];})
var y = d3.scale.ordinal()
.domain(domainY)
.rangeBands([0, 300]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(0);
/* CALL Y-AXIS */
chart.append("g")
.attr("class", "y axis")
.call(yAxis)
.attr("transform", "translate(120,0)");
/* DRAW BARS */
var bar = chart.selectAll("g.bar")
.data(dados)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(130,0)"; });
bar.append("rect")
.attr("y", y)
.attr("width", function(d) { return x(d[1]);} )
.attr("height", y.rangeBand()-6);我的问题
当我在绘图栏后调用Y轴时,y.domain()如下所示:
["USA", "Inglaterra", "Turquia", "Canadá", "Japão", "Nova Zelândia", "Brasil",
Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2]]并将类别(Y轴)成对绘制为名称/值:
USA,126
Inglaterra,81
Turquia, 34
Canadá,31
Japão,29
Nova Zelândia,25
Brasil,20当我在绘图栏之前调用Y轴时,y.domain()看起来是一样的,但是正确地绘制了类别:
USA
Inglaterra
Turquia
Canada
Japão
Nova Zelândia
Brasil我在域上尝试了许多更改,但都没有成功。domainY看起来是正确的,但是在将数据绑定到图表之后,就会发生重复。我做错了什么?
发布于 2012-08-31 21:27:36
看起来你把错误的值传递给了你的y-比例。而不是attr("y", y),您需要说attr("y", function(d) { return y(d[0]); })。
https://stackoverflow.com/questions/12201845
复制相似问题