正确调整D3条形图的大小

Question

我正在尝试向D3条形图添加标签/轴/标题/等。我可以得到接近正确大小的东西，但我最终剪掉了最后一条线的一部分(因此最后一条线比其他线更薄)。下面是相关的代码：

var x = d3.scale.linear()
.domain([0, object.data.length])
.range([0, object.width]);
var y = d3.scale.linear()
.domain([object.min-(object.max-object.min)*.15, object.max (object.max-object.min)*.15])
.rangeRound([ object.height - 30, 0]);

var vis = d3.select(object.ele)
    .append("svg:svg")
    .attr("width", object.width)
    .attr("height", object.height)
    .append("svg:g");

vis.selectAll("g")
.data(object.data)
.enter().append("rect")
.attr("x", function(d, i) { return x(i); })
.attr("y", function(d) { return object.height - y(d.value); })
.attr("width", object.width/object.data.length - 1)
.attr("height",  function(d) { return y(d.value); })
.attr("transform", "translate(30,-30)");

目前，所有内容(标签、轴等)都是30px。我如何正确地改变图表，以便为我需要的任何其他东西腾出空间？

Answer 1

由于使用了平移x坐标，但x的范围仅为宽度，而没有额外的30个像素，因此您正在切掉最后一个条形图。

此外，使用.domain(object.min，object.max)来简化y域可能会更容易，然后将"y“和"height”函数颠倒过来。这样，您可以从y(d.value)处开始矩形，并将其高度设置为object.height - y(d.value)。

我最初会创建三个组，一个是y轴，一个是x轴，然后是条形图。在最后一个组中绘制条形图，然后平移整个组，而不是每个单独的条形图。增加object.width和object.height的大小以匹配所需的总空间。