d3 js svg проблема: родительская фигура и дочерняя фигура внутри - PullRequest
Новая
       12

d3 js svg проблема: родительская фигура и дочерняя фигура внутри

0 голосов
/ 11 июля 2020

У меня один прямоугольник поверх моего svg. я хочу перетащить несколько фигур в этот прямоугольник. как только я отбрасываю эти формы, я хочу, чтобы эти элементы были созданы как дочерние группы в родительской группе прямоугольника. если я перетаскиваю родительский прямоугольник, потомки должны перетаскиваться вместе с ним.

Я столкнулся с проблемами при достижении этого. Я делюсь частичным кодом здесь. 

var inter = false;

    
var svg = d3.select("body").append("svg")
  .attr("width", 700)
  .attr("height", 400);


svg.append("rect")
  .attr("width", 700)
  .attr("height", 400)
  .style("stroke", "#999999")
  .style("fill", "#F6F6F6")


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

function dragmove() {

    //console.log(d,i);
  var x = d3.event.x;
  var y = d3.event.y;
  d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
  let elementId = d3.select(this).attr("id");
  console.log(elementId);
  var a = d3.select(document.elementFromPoint(d3.event.x, d3.event.y))
    .attr("id");
  console.log(a);
  if(a == 'circlebig') {
      console.log(inter);
    if(inter){
        console.log(inter)
        var x = d3.event.x;
        var y = d3.event.y;
        //console.log(d3.select(this).attr(x));
        d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
        d3.select('#circlebig').append(d3.select(this));

    } else {
        drag.on("drag", null);
    }
  } 
}





svg.append("circle")
.attr({ cx: 150, cy: 150, r: 25, fill: "blue" })
.style("cursor", "pointer")
.attr("id","circlebig")
.attr("class","interactive")
.call(drag);

svg.append("circle")
.attr({ cx: 50, cy: 50, r: 5, fill: "red" })
.style("cursor", "pointer")
.attr("id","circlesmall")
.data([ {"x":0, "y":0} ])
.call(drag);

var interactive = d3.selectAll(".interactive")
    .on("mouseover", function(d){
        inter = true;
        console.log(inter);
    })
    .on("mouseleave", function(d){
        inter = false;
        console.log(inter);
    });
...