1

我正在尝试在 d3 中编写可重用的情节。绘图类型取决于数据和共享轴、标签、网格等。

我无法将我的酒吧自下而上定位。我的线路没有任何问题，所以看起来很奇怪。我认为我的问题在于本节

// plot area
    var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .classed("analysis-line-line", true);

情节区域比它应该的要高，但我不明白这条线是怎么来的。

我将不胜感激任何指导。此小提琴中的完整示例

4

1 回答 1

1

为了消除轴之间的间隙，这就是我所做的：

svg.append("g")
        .attr("class", "analysis-line-axis")
        .attr("transform", "translate(" + margin.left + "," + (yscale.range()[0] + margin.top) + ")")
        .call(d3.svg.axis().scale(xscale).orient("bottom"));

我认为您必须使用（0.9*height + margin.top），而不是使用高度。

要调整条以正确对齐轴，您必须将它们向上平移。

rects.attr("transform","translate(0,"+ -(0.1*height) + ")")

更新了小提琴。

上一个答案：

渲染条的位置也必须从高度计算中减去 margin.top：

.attr("height", function(d) { return height - yscale(d) - margin.top; })

更新了 jsfiddle 链接

于 2013-09-26T15:38:48.680 回答