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像素。

也可以更容易简化你的y域使用.domain（[object.min，object.max]）然后反转“y”和“height”函数。这样你就可以在y（d.value）处开始直接并使它成为高度object.height - y（d.value）。

我最初会创建三个组，一个用于y轴，一个用于x轴，然后另一个用于条形。在最后一组中绘制条形图，然后翻译整个组本身而不是每个单独的条形图。增加object.width和object.height的大小以匹配您想要的总空间。

正确调整D3条形图的大小

1 个答案: