我正在使用d3.js制作水平条形图,并且无法更改条形图矩形的大小。对于我想做的事情,它们太大了。这是一个屏幕截图,因为JSFiddle不会显示图表(数据在我的本地驱动器上)。这是我的代码:
var m = [40, 20, 10, 145], //TRBL
w = 400 - m[1] - m[3], //margin.right - margin.left
h = 400 - m[0] - m[2]; //margin.top - margin.bottom
var format = d3.format(",.0f");
var x = d3.scale.linear().range([0, w]),
y = d3.scale.ordinal().rangeRoundBands([0, h], .2);
var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-10),
yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);
var cause = d3.select("#cause").append("svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")")
d3.csv("data/cause.csv", function(data) {
// Parse numbers, and sort by value.
data.forEach(function(d) { d.number = +d.number; });
data.sort(function(a, b) { return b.number - a.number; });
// Set the scale domain.
x.domain([0, 350]);
y.domain(data.map(function(d) { return d.cause; }));
var bar = cause.selectAll("g.bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(0," + y(d.cause) + ")"; });
bar.append("rect")
.attr("width", function(d) { return x(d.number); })
.attr("height", y.rangeBand());
bar.append("text")
.attr("class", "number")
.attr("x", function(d) { return x(d.number); })
.attr("y", y.rangeBand() / 2)
.attr("dx", 3) //Number position
.attr("dy", ".35em") //Position in the rect
.attr("text-anchor", "start")
.text(function(d) { return format(d.number); });
cause.append("g")
.attr("class", "x axis")
.call(xAxis);
cause.append("g")
.attr("class", "y axis")
.call(yAxis);
cause.append("text") //Y AXIS TEXT
.attr("class", "y label")
.attr("x", w / 3)
.attr("dy", "-1.5em")
.text("Cause of Deaths")
.style("font-size","13px");
});
我是d3 noobie。请让我知道是否还有其他不正确的地方。
看来您想更改h
变量,对不对?
在这里使用它:
bar.append("rect")
.attr("width", function(d) { return x(d.number); })
.attr("height", y.rangeBand());
定义每个钢筋的高度。
所以说:
var m = [40, 20, 10, 145], //TRBL
w = 400 - m[1] - m[3], //margin.right - margin.left
h = 400 - m[0] - m[2]; //margin.top - margin.bottom
将该400
值更改为较小的值。它还将被计入您的y
价值。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句