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 に答える