1

我正在尝试将标签/轴/标题/等添加到 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)");

目前一切（标签、轴等）都是 30 像素。如何正确更改图表以腾出空间容纳我需要的其他任何东西？

4

1 回答 1

2

您正在切断最后一个栏，因为您使用平移 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 的大小以匹配您想要的总空间。

于 2012-09-06T22:07:09.783 回答