Question

我正试图在d3中写一个可重用的图。绘图类型取决于数据并共享轴，标签，网格等。

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

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

情节区域应该高于它应该但是我不明白为什么线条很好。

我很感激任何指导。这个fiddle

中的完整示例

Answer 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) + ")")

更新了fiddle。

上一个回答：

在渲染条形图的位置，你必须从高度计算中减去margin.top：

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

更新了jsfiddle link

定位条形图 - d3

1 个答案:

更新了fiddle。