2

目盛りを大きくしてドラッグ可能にする必要がある用途にd3.svg.axisを再利用したいと思います。

軸

たとえば、上記のコードがここにある軸のスクリーンショットでは、25または69のいずれかにカーソルを合わせると、マウスが四隅の形状に変わり、目盛りを左にドラッグして、マウスを押したままクリックして右に移動します。

<svg>d3によって自動生成されたコード<line>が、クラスが「tick」であるティックごとに個別の要素を生成することがわかります。

軸コード

したがって、これらの要素をターゲットにしてドラッグに応答させる方法があると思いますが、その方法はわかりません。そしてもちろん、線要素はどこにもドラッグできませんが、水平軸に沿って左右にスライドするだけで、最初と最後の目盛りを超えて移動することはできません。

4

1 に答える 1

2

私はこれを機能させました：livecoding.ioの例

そして、ここで関連するコードは、特にクリーンではありませんが、機能しています：

var w = h = 600;
var padding = 20;
var svg = d3.select("svg").attr("width", w).attr("height", h);

var xScale = d3.scale.linear()
             .domain([0, 100])
             .range([padding, w - padding * 2]);

var sharedAxis = function() {
  return d3.svg.axis()
            .scale(xScale)
            .tickValues([19,69])
            .tickSize(50);
}

var downAxis = sharedAxis()
            .orient("bottom");

var upAxis = sharedAxis()
            .orient("top");

var addPlayer = function(playerAxis) {
  svg.append("g")
   .attr("class", "axis")
   .attr("transform", "translate(0," + (100) + ")")
   .call(playerAxis);
}


addPlayer(downAxis);
addPlayer(upAxis);

var drag = d3.behavior.drag()
    .on("drag", dragmove);

function dragmove(d) {
  // move it
  var curX = d3.select(this).attr("transform").match(/\(([^,]+),/)[1];
  var newX = Math.max(xScale.range()[0], d3.event.x);
  newX = Math.min(xScale.range()[1], newX);
  var newTransform = d3.select(this).attr("transform").replace(/\([^,]+,/, "(" + newX + ",");
  d3.select(this).attr("transform", newTransform);
  // update text
  d3.select(this).select("text").text(parseInt(xScale.invert(newX)));
}

var allTicks = d3.selectAll(".axis g").call(drag);
于 2013-03-12T05:10:42.533 に答える