d3 klicken Sie auf und ziehen Sie Ereignis-Verschachtelung
Ich bin nisten viele Elemente in einer g-element etwa so:
<g>
<rect></rect>
<text></text>
...
</g>
Allerdings gibt es einige rects, ich möchte in der Lage sein, ziehen Sie eigene Veranstaltungen. Das problem ist, dass wenn man Sachen in ein g-tag, dessen Größe erweitert, um enthalten die tags. So, obwohl ich zuordnen kann-Veranstaltungen es gibt keine Art, wie Sie ausgelöst werden können, da der g-tag ist der event ist irgendwie wichtig, obwohl die rect ist oben drauf.
Gibt es eine Art workaround, dass man Jungs kennen?
EDIT: Hier eine einfache komplette Fall in seiner Gesamtheit. Ein Rechteck und ein Kreis, der innen einen g. Der g ist ziehbar und sollte der Kreis werden, ziehbar aber auch nicht.
var gDragBehav = d3.behavior.drag()
.on('drag', gDragDrag)
function gDragDrag(d,i) {
d.x += d3.event.dx;
d.y += d3.event.dy;
d3.select(this)
.attr('x', d.x)
.attr('y', d.y)
.attr("transform", "translate(" + d.x + "," + d.y + ")");
}
var circleDragBehav = d3.behavior.drag()
.on('drag', circleDragDrag);
function circleDragDrag(d,i) {
console.log('dragging a circle')
d.cx += d3.event.dx;
d.cy += d3.event.dy;
d3.select(this)
.attr('cx', d.cx)
.attr('cy', d.cy)
}
var svg = d3.select('body').append('svg')
var g = svg.selectAll('g').data([{x: 10, y:10}])
.enter().append('g').call( gDragBehav )
g.append( 'rect' ).attr('width', 100 ).attr('height', 100 )
g.selectAll( 'circle' ).data([{cx: 0, cy:0}])
.enter().append( 'circle' )
.attr('cx', function(d) { return d.cx } ).attr('cy', function(d) { return d.cy } )
.attr('r', 40 )
.call( circleDragBehav )
EDIT: Hier noch der code
var group = this.d3svg.selectAll('g' + '.' + this.className)
.attr('x', this.drawFuncs['x'] )
.attr('y', this.drawFuncs['y'] )
.attr("transform", this.drawFuncs['translate'] )
.attr('class', this.className )
.call(gDragBehav)
.on( 'click', blockClickMenu )
ports = ['AtomicPort']
for ( port in ports ) {
drawPort.call( this, group, ports[port] )
}
function drawPort( d3svg, portName, redraw ) {
d3svg.selectAll('rect.' + portName)
.data( function(d) { return d.ports[ portName ] } )
.enter().append('rect')
.attr('x', this.drawFuncs['x'] )
.attr('y', this.drawFuncs['y'] )
.attr('width', this.drawFuncs['width'] )
.attr('height', this.drawFuncs['height'] )
.attr('class', portName )
.call(portDragBehav)
var portDragBehav = d3.behavior.drag()
.on('drag', portDragDrag);
function portDragDrag(d,i) {
d.x += d3.event.dx;
d.y += d3.event.dy;
d3.select(this)
.attr('x', d.x)
.attr('y', d.y)
d3.event.stopPropagation();
}
var gDragBehav = d3.behavior.drag()
.on('dragstart', gDragStart)
function gDragDrag(d,i) {
d.x += d3.event.dx;
d.y += d3.event.dy;
d3.select(this)
.attr('x', d.x)
.attr('y', d.y)
.attr("transform", "translate(" + d.x + "," + d.y + ")");
d3.event.stopPropagation(); //Uncaught TypeError: Object #<Object> has no method 'stopPropagation'
}
InformationsquelleAutor ballaw | 2012-04-10
Du musst angemeldet sein, um einen Kommentar abzugeben.
SVG
<g>
- element keine Größe oder Fläche; es ist ein transparenter container für alle seine Nachkommen, und nicht abfangen können Veranstaltungen für andere Elemente (es sei denn, Sie sind das hinzufügen einer Ereignis-listener ausgelöst werden, während der capture-phase").Als ein übergeordnetes element, die Ereignisse sprudeln; wahrscheinlich, was Sie sehen, ist, dass was auch immer Fall, Sie sind mit der zum auslösen des drag-start (mousedown?) auf der
<rect>
ist auch blubbernd an die<g>
starten und gleichzeitigen ziehen von , dass.Um dies zu beheben, den Sie beenden möchten Ihre Veranstaltung sprudelt. In Ihrem Ereignis-handler für das mousedown (oder was auch immer) auf die
<rect>
hinzufügen:Ohne deinen tatsächlichen code (oder besser, eine abgespeckte test-Fall) ist es schwer, sicher zu wissen, oder helfen Ihnen weiter.
Bearbeiten Hier ist eine funktionierende version von Ihrem einfaches Beispiel: http://jsfiddle.net/ZrCQE/2/
Speziell, offenbar
d3.event
ist nicht das Ereignis selbst, sondern ein Objekt mit einersourceEvent
Eigenschaft, die auf die eigentliche Veranstaltung.Das ist gut (aber zu erwarten) Informationen. Es ändert nichts an meiner Antwort.
OK, aber ich habe nicht einen handle auf das Ereignis. Wie kann ich call stopPropagation?
Ich kann dir nicht helfen ohne zu sehen, Ihre event-Registrierungen auf der
<g>
und<rect>
."Das problem ist, dass die Elemente innerhalb der g-tag nicht genannt wird." ich weiß nicht, was dieser Satz bedeutet. Vor allem, was meinst du mit "als"?
InformationsquelleAutor Phrogz
Habe ich eine ähnliche Art von Problem (http://jsfiddle.net/j8RZN/1/), außer dem workaround scheint nicht zu helfen.
InformationsquelleAutor Andy