0

こんにちは私はd3ライブラリで作成されたこのヒストグラムを持っています：jsFiddleズーム
可能なので、パンすることもできます。ただし、負の値にパンできないように、ヒストグラムを少なくともxAxisに固定する必要があります。ドメインを制限して試してみましたが、これは軸に対して機能しますが、バーには影響しません。

redraw {
...
xScale.domain()[0] = xScale.domain()[0] < 0 ? 0 : xScale.domain()[0];
xScale.domain()[1] = xScale.domain()[1] > data.length ? data.length : xScale.domain()[1];
yScale.domain()[0] = yScale.domain()[0] < 0 ? 0 : yScale.domain()[0];
yScale.domain()[1] = yScale.domain()[1] > d3.max(data) ? d3.max(data) : yScale.domain()[1];
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
vis.selectAll(".bar").attr("transform", "translate(" + zoombie.translate() + ")scale(" + zoombie.scale() + ")");
}

誰か助けてもらえますか？

4

2 に答える 2

0

私はd3にあまり精通していませんが、この前の答えはあなたが探していることをするのに十分な説明を与えるはずです。

ここにそれらすべての説明の結果があります

これがお役に立てば幸いです:)

于 2012-12-20T14:33:40.970 に答える
0

短い注文で、これが私たちが得たものです。まず、幅を除く視覚化のすべての属性がスケールで定義されます。何よりもまずこれを修正する必要があります。これにより、バーにスケールと平行移動変換を追加して、目的のズーム効果を生成する必要がなくなります。にはいくつかの方法があります。順序尺度を使用することをお勧めしますが、これも短い順序です。代わりにそれを行う関数を作成します。

function barWidth(d, i) {
  return (xScale(i + 1) - xScale(i)) * (data.length / (data.length + 1))
}

visに移動し、手動で計算している幅をその関数に置き換えます。

次に、これはあなたが探しているものではないと思いますが、ほとんどの場合、そこに到達します。ズーム定義を変更して、yScale

var zoombie = d3.behavior.zoom().x(xScale).scaleExtent([1, 100]).on("zoom", redraw);

これは、zoombieを鍋のように動作させることです。今再描画のために：

function redraw() {
  svg.select(".x.axis").call(xAxis);
  vis.selectAll("rect.bar")
      .attr('width', barWidth)
      .attr('x', function(d, i) { return xScale(i); });
}

そして、あなたは自分自身にパンニング棒グラフを持っています。パンに垂直方向の緯度をいくらか許可するという点では、それは可能ですが、それを機能させることはより複雑です。さらに、棒グラフの上部にズームインするときに何をしますか？

于 2012-12-21T18:07:19.293 に答える