d3：在 d3.svg.axis 上制作刻度线可拖动？答案

【问题标题】：d3: Make tick marks on d3.svg.axis draggable?d3：在 d3.svg.axis 上制作刻度线可拖动？
【发布时间】：2013-02-27 05:19:09
【问题描述】：

我想将 d3.svg.axis 重新用于需要较大且可拖动的刻度线的用途：

例如，在上面the axis whose code is here的截图中，当你将鼠标悬停在 25 或 69 上时，我希望鼠标变为四角形状，然后能够向左拖动刻度线并按住鼠标右键。

我可以看到 d3 自动生成的 <svg> 代码为每个类为“tick”的刻度生成一个单独的 <line> 元素：

所以我认为有一种方法可以定位这些元素并使它们响应拖动，但我不清楚如何做到这一点。当然，线元素不能随意拖动，只能沿水平轴左右滑动，不能超出开始和结束的刻度。

【问题讨论】：

标签： d3.js

【解决方案1】：

我得到了这个工作：livecoding.io example

这里是相关代码，不是特别干净但可以工作：

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);

【讨论】：