Div-Element wird außerhalb des Körpers angefügt

Ich möchte eine Liste mit der rechten Maustaste auf einen Datenknoten implementieren. Um dies zu tun, stieß ich auf das d3-Kontextmenü-Plugin von d3.js. Das Problem, dem ich gegenüberstehe, ist, dass das div-Element außerhalb des body-Tags aufgerufen wird.Div-Element wird außerhalb des Körpers angefügt

Ich habe so ein Problem noch nie gesehen. Ich verfolge das Plugin Beispiel hier gegeben: http://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=preview

Dies ist der Link zu der Bibliothek Dokumentation: https://github.com/patorjk/d3-context-menu

Ich habe keine Ahnung, warum es in einer solchen Art und Weise verhält. Meine Code-Struktur sieht wie folgt aus:

eventGroup = focusClip.selectAll(".event").data(data); 

// Enter phase --- 
eventGroupEnter = eventGroup.enter().append("svg"); 
eventGroupEnter.append("rect"); 
eventGroupEnter.append("circle"); 
eventGroupEnter.append("text"); 

// Event Group 
eventGroup 
    .attr("class", "event") 
    .attr("x", function(d) { 
    return parseInt(x(d.time)) - 10; 
    }) // offset for the bg and center of dot 
    .attr("y", function(d) { 
    return parseInt(y(d.plotY)); 
    }) 
    .attr("width", function(d) { 
    return parseInt((d.label.length/2)) + 60 + "em"; 
    }) 
    .attr("height", "20"); 

// Background 
eventGroup.select("rect") 
    .attr("x", 0) // removes the "<rect> attribute x: Expected length, 'NaN'" Error 
    .attr("y", 4) 
    .attr("width", "100%") 
    .attr("height", "12") 
    .attr("fill", "url(#event-bg)"); 

menu = [{ 
    title: "Item #1" 
}]; 
// Dot 
eventGroup.select("circle") 
    .attr("class", "dot") 
    .attr("r", 4) 
    .attr("cx", 10) 
    .attr("cy", 10) 
    .attr("fill", function(d) { 
    return d.evtColor ? d.evtColor : "#229ae5"; 
    }) 
    .attr("stroke", function(d) { 
    return d.evtColor ? d.evtColor : "#229ae5"; 
    }) 
    .attr("stroke-width", 2) 
    .on("contextmenu", d3.contextMenu(menu, function() { 
    console.log("Quick! Before the menu appears!"); 
    })) 
    .on("mouseenter", tooltip.mouseover) 
    .on("mouseleave", tooltip.mouseout) 
    .on("click", annotateBox.click);

Um es zu erklären, gut Ich füge das Bild des Diagramms:

Der Rechtsklick Veranstaltung wird auf dem „Punkt“ Teil der angerufene Veranstaltung. Warum würde div-Element außerhalb des Körpers angehängt werden?

Quelle

2017-12-20 user2128

Bitte den Link zum Plugin Dokumentation teilen. –

Vielen Dank für die Freigabe des Links zum Plugin. Ich hatte einen (sehr) schnellen Blick, aber ich habe keine Ahnung gefunden. Wenn dies ein Fehler ist, erhalten Sie möglicherweise eine richtige Antwort, um ein Github-Problem zu lösen. Einfach bestätigen, verwenden Sie D3 v3? –

Ja, ich benutze d3 v3. – user2128

Dies scheint von Entwurf zu sein. Wenn man sich die source code dieses Plugin anschauen, werden Sie sehen:

d3.selectAll('.d3-context-menu').data([1]) 
    .enter() 
    .append('div') 
    .attr('class', 'd3-context-menu');

Da selectAll auf der Wurzel genannt, wird die div in die <html> angehängt werden, nicht auf die <body>.

Also hat der Autor entweder dies absichtlich getan oder er/sie hat vergessen, dass d3.selectAll sich von selection.selectAll unterscheidet.

Hier ist eine grundlegende Demo, klicken Sie auf "Code-Snippet ausführen", öffnen Sie die Dev-Tools Ihres Browsers und überprüfen Sie das Snippet-Fenster.

d3.selectAll("foo") 
 
    .data([1]) 
 
    .enter() 
 
    .append("div") 
 
    .attr("class", "test")

<script src="https://d3js.org/d3.v3.min.js"></script>

Du wirst sehen:

<html> 
    <head>...</head> 
    <body>...</body> 
    <div class="test"></div> 
</html>

Quelle

2017-12-20 08:16:55

ok, also schlagen Sie vor, dass dies das beabsichtigte Verhalten ist? denn selbst in diesem Fall bekomme ich doppelte Bildlaufleisten auf der rechten Seite, was darauf hindeutet, dass das d3-Kontextmenü im Hintergrund des Rests der Implementierung läuft. – user2128

Ich weiß nicht, ob das beabsichtigt ist, was ich sage ist, dass dies das erwartete Ergebnis angesichts des Quellcodes ist. Sie können eine Github-Frage öffnen, in der Sie dies dem Autor mitteilen. –

Ok danke! Ich habe die Frage zu Github gestellt. Wird hier aktualisiert, wenn ich eine Antwort bekomme. – user2128

Div-Element wird außerhalb des Körpers angefügt

Antwort

Verwandte Themen