Ich benutze die D3-Bibliothek, um eine Zeichenanwendung zu erstellen.

Ich muss ein Objekt (der Einfachheit halber ein Kreis) auf die Koordinaten zeichnen, auf die der Benutzer geklickt hat. Problem ist, wenn der Benutzer das Schwenken und Zoomen verwendet und das Ansichtsfenster verschiebt. Dann befindet sich das Objekt an einer falschen Position (ich vermute, das Problem ist, dass die Ereigniskoordinaten relativ zum SVG-Element und nicht zu g sind, sodass sie ohne ordnungsgemäße Transformation berechnet werden).

$('svg').on('click', function(event) {
    d3.select('#content-layer').append('circle')
    .attr('r', 10)
    .attr('cx', event.offsetX)
    .attr('cy', event.offsetY)
    .attr('stroke', 'black')
    .attr('fill', 'white');
});

var zoomBehavior = d3.behavior.zoom()
    .scaleExtent([1, 10])
  .on('zoom', () => {
    var translate = "translate(" + d3.event.translate + ")";
    var scale = "scale(" + d3.event.scale + ")";
    d3.select('#content-layer').attr("transform", translate + scale);
    });

d3.select('svg').call(zoomBehavior);

Ich habe versucht, dem g-Element einen Klick-Rückruf hinzuzufügen, aber er funktioniert nicht (ich vermute, er hat keine Größe?).

Hier ist jsfiddle:https: //jsfiddle.net/klinki/53ftaw7r