ブラシをズームするためのタイムラインを提供するために、より小さなエリアグラフを持つ積み上げ棒グラフと折れ線グラフがあります。私は、ブラシをズームするときに、ブラシを線に影響させることができますが、積み重ねた棒にはできません。d3:積み上げグラフをどのようにズームするには?
私の折れ線グラフは、そのように宣言されています
var cumulativeLine = d3.line()
.x(function(d) { return (x(d.x1) + x(d.x0))/2; })
.y(function(d) { return y1(d.remainingCumulative); });
私は(ヒストグラムデータから生成されている)私の積み重ね棒のための同等のものを持っていないのに対し。
svg2.append("g")
.selectAll("g")
.data(stack(stackData))
.enter().append("g")
.attr("fill", function(d) { return colours(d.key); })
.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr('class', 'data-rect')
.transition(t)
.attr("x", 1)
.attr("transform", function(d) { // transforming is way better looking than setting explicit x and y props.
return 'translate('+ x(d.data.x0) + ',' + y(d[1]) + ')';
})
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("width", function(d) { return (x(d.data.x1) - x(d.data.x0)) - 1; });
...
svg2
は、キャンバスの選択である:それらを描画するには、これは私が持っているものです。これはブラッシング関数である。私はそれをあらかじめ用意されたを与えることができるので
function brushed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
var s = d3.event.selection || xZoom.range();
x.domain(s.map(xZoom.invert, xZoom));
svg2.selectAll(".data-rect").attr("d", function(d) {
//console.log(d); // low, high, data
return
});
svg2.select(".firstline").attr("d", cumulativeLine);
svg2.select(".xAxis").call(d3.axisBottom(x));
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
.scale(width/(s[1] - s[0]))
.translate(-s[0], 0));
}
マイラインは、.firstline
ラインで(それは余裕の重複がありますが、それは今の私の最大の問題ではありません)主に細かい再レンダリングされます関数。私の質問は、積み重なったバーにどのように同じものを提供できますか?私の積み重なった棒のレンダリングの完全な例(行なし)is here。