2016-09-06 2 views
0

Ich möchte eine dram-Funktion auf dem internen div-Element aufrufen und ich möchte die übergeordnete <g> und ihren Inhalt gezogen werden. Wie kann dies erreicht werden?d3 machen eine Gruppe ziehbar

Ich denke, das funktioniert nicht, weil <g> nur ein Gruppierungselement und kein Container ist.

Der Transformer funktioniert, aber es spielt lustig, warum?

<g id="input-container"> 
    <foreignObject x="10" y="10" width="200" height="400" id="input-container-fo" class="container-fo"> 
     <div xmlns="http://www.w3.org/1999/xhtml" id="input-container-div" class="container-div"> 
      <div class="container-div-title" id="input-container-div-title">Input</div> 
     </div> 
    </foreignObject> 
</g> 
<script> 
    var dragcontainer = d3.drag() 
          .on("start", function() { 
           }) 
          .on("drag", function (d, i) { 
            var x = d3.event.x; 
            var y = d3.event.y; 
            // d3.select(this.parentNode.parentNode).attr("transform", "translate(" + x + "," + y + ")"); 
            d3.select(this.parentNode.parentNode).attr("x",x).attr("y",y); 
              }) 
          .on("end", function() { 

              }); 
    d3.select("#output-container-div").call(dragcontainer); 
</script> 
+0

'this.parentNode.parentNode' –

+0

@GerardoFurtado Ich habe es versucht, aber es funktioniert nicht – SachiDangalla

+1

Sie haben ein anderes Problem, weil es funktioniert. –

Antwort

1
<g id="input-container"> 
    <foreignObject x="10" y="10" width="200" height="400" id="input-container-fo" class="container-fo"> 
    <div xmlns="http://www.w3.org/1999/xhtml" id="input-container-div" class="container-div"> 
    <div class="container-div-title" id="input-container-div-title">Input</div> 
    </div> 
</foreignObject> 
</g> 

Wenn „Container-div-Titel“ Die Abteilung ist in dem Ereignis eingetreten wird, dann sollten Sie

this.parentElement.parentElement.parentElement 

nicht versuchen, in der nur parent entfernen für entsprechende Ereignis vorkommenden Elemente

Verwandte Themen