在v4

Question

我一直在努力学习d3.drag，将其整合到v4的sankey图表中，类似于this example。

起点是Mikes圈子拖动示例here我试图与对象+文本拖动实现here集成。

可悲的是，我无法理解如何抓住“g＆＃39;元素使用d3.drag。

过去几天已经进行了几次迭代，但我认为我最接近的是下面的示例，它只会抓取一个特定的拖动矩形（我怀疑我可能已经使用了＆＃39;这个＆ ＃39;）

＆＃13;

＆＃13;

var margin = {top: 10, right: 10, bottom: 30, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var rectangles = d3.range(20).map(function() {
  return {
    x: Math.round(Math.random() * (width)),
    y: Math.round(Math.random() * (height))
  };
});

var color = d3.scaleOrdinal(d3.schemeCategory20);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

var group = svg.append("g")
  .data(rectangles)
  .attr("transform", 
     "translate(" + margin.left + "," + margin.top + ")")
      .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

group.selectAll("rect")
  .data(rectangles)
  .enter().append("rect")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .attr("height", 60)
    .attr("width", 30)
    .style("fill", function(d, i) { return color(i); });

group.selectAll("text")
  .data(rectangles)
  .enter().append("text")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
      .attr("text-anchor", "start")
      .style("fill", "steelblue")
      .text("Close");

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);
}

function dragged(d) {
  d3.select(this).select("text").attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y);
  d3.select(this).select("rect").attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y);
}

function dragended(d) {
  d3.select(this).classed("active", false);
}

＆＃13;

.active {
  stroke: #000;
  stroke-width: 2px;
}

.rect {
  pointer-events: all;
  stroke: none;
  stroke-width: 40px;
}

＆＃13;

<script src="//d3js.org/d3.v4.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

我尝试按照here的答案实现代码，这是一个非常类似的代码，但是从力图中移动所涉及的更改也让我失败了。

任何指导意见。我觉得我错过了一些基本的东西。

Answer 1

我稍稍调整了你的代码。我将矩形和文本分组，并将拖动属性添加到组中。因此，当我们拖动时，文本和矩形都会在接收器中移动。

<select ng-model="opt">
  <option ng-repeat="option in data"
    value="{{option}}" >{{option.name}}
  </option>
</select>

	var margin = {top: 10, right: 10, bottom: 30, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var rectangles = d3.range(10).map(function() {
  return {
    x: Math.round(Math.random() * (width)),
    y: Math.round(Math.random() * (height))
  };
});

var color = d3.scaleOrdinal(d3.schemeCategory20);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

var group = svg.selectAll('g')
	.data(rectangles).enter().append("g").attr("transform", 
     "translate(" + margin.left + "," + margin.top + ")")
      .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

group.append("rect")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .attr("height", 60)
    .attr("width", 30)
    .style("fill", function(d, i) { return color(i); });
	
group.append("text")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
      .attr("text-anchor", "start")
      .style("fill", "steelblue")
      .text("Close");	
		
function dragstarted(d) {
  d3.select(this).raise().classed("active", true);
}

function dragged(d) {
  d3.select(this).select("text").attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y);
  d3.select(this).select("rect").attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y);
}

function dragended(d) {
  d3.select(this).classed("active", false);
}

.active {
  stroke: #000;
  stroke-width: 2px;
}

.rect {
  pointer-events: all;
  stroke: none;
  stroke-width: 40px;
}

希望这有帮助。

Answer 2

您还可以尝试这种分组和移动组的替代方法。

＆＃13;

＆＃13;

Chain of Responsability

＆＃13;

var margin = {top: 10, right: 10, bottom: 30, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var rectangles = d3.range(10).map(function() {
    return {
        x: Math.round(Math.random() * (width)),
        y: Math.round(Math.random() * (height))
    };
});

var color = d3.scaleOrdinal(d3.schemeCategory20);

var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);

var group = svg.selectAll('g')
               .data(rectangles)
               .enter().append("g")
               .attr("transform",function(d) {
                      return "translate(" + (margin.left + d.x) + "," + (margin.top + d.y) + ")"
                })
               .call(d3.drag()
                       .on("start", dragstarted)
                       .on("drag", dragged)
                       .on("end", dragended));

group.append("rect")
     .attr("height", 60)
     .attr("width", 30)
     .style("fill", function(d, i) { return color(i); });

group.append("text")
     .attr("text-anchor", "start")
     .style("fill", "steelblue")
     .text("Close");

function dragstarted(d) {
    d._drag = {
        distance:0,
        threshold:2,
        initiated: false
    };
}

function dragged(d) {
    if (!d._drag.initiated) {
        d._drag.initiated = true;
        d3.select(this).raise().classed("active", true);
    }
    d._drag.distance += d3.event.dx * d3.event.dx + d3.event.dy * d3.event.dy;
    d.x = d3.event.x;
    d.y = d3.event.y;
    d3.select(this).attr('transform', 'translate('+[d.x,d.y]+')');
}

function dragended(d) {
    if (d._drag.distance < d._drag.threshold) {
        d3.select(window).on('click.drag', null);
        return;
    }
    d3.select(this).classed("active", false);
}

＆＃13;

.active {
  stroke: #000;
  stroke-width: 2px;
}

.rect {
  pointer-events: all;
  stroke: none;
  stroke-width: 40px;
}

＆＃13;

＆＃13;

＆＃13;