Tag: svg

Hinzufügen von Schaltflächen zu einem Diagramm – svg

Ich möchte eine interaktive Karte mit einer JS-Bibliothek entwickeln. In diesem Diagramm möchte ich Schaltflächen (innerhalb des Diagramms) auf diese Weise (in rot): Ich möchte auch den Zeilentyp ändern (zB punktiert). Ich habe versucht Morris.js aber diese lib ist nicht erlaubt mir zu tun, was ich tun möchte. Gibt es irgendeine andere Bibliothek, die ich […]

Wie öffnet man eine URL in einem Popup-Fenster, wenn auf einen Knoten in D3 Kraft Layout?

Ich möchte eine andere Webseite anrufen, um in einem Pop-up-Fenster für jeden Knoten zu öffnen, anstatt dass es das aktuelle Svg-Fenster auftaucht. Hier ist das JSFiddle . Hier ist der Teil des Codes, den ich denke, muss geändert werden. Vielen Dank! var node = svg.selectAll(".node") .data(data.nodes) .enter().append("g") .attr("ind",function(d,i){ return i}) .attr("class", "node") .on("mouseover", mouseover) .on("mouseout", […]

Benutzerdefinierte SVG Signatur funktioniert auf CODEPEN aber nicht auf lokaler Maschine – was ist falsch? [abgeschlossen]

Ich habe versucht, den folgenden Code von Codepen http://codepen.io/ghepting/pen/xnezB zu kopieren, um es zu versuchen und es auf meiner localhost Maschine auszuführen. In Codepen, wie Sie sehen können, ist die Signatur animiert. Allerdings, auf meiner lokalen Maschine es nur drucken die Signatur in vollem Umfang und nicht animieren überhaupt. Irgendeine Idee warum? Ich habe drei […]

SVG-Pfade bleiben nach dem Umzug mit Javascript

Ich habe ein Rechteck in meinem SVG, ich habe eine Grafik wie Flugzeuge und ich möchte Maske verwenden und verschieben sie auf zufällige Umlaufbahn. Ich suche die Lösung dafür. EDIT: Ich möchte ein Javascript bekommen, das wie die schwarzen Pfade als Maske in SVG macht. Wollen Sie sich bewegen und eine Kopie des Elements machen. […]

Wie man die Gitterlinien im Diagramm statisch macht

Betrachte das Beispiel im Link Etikettieren der Achse mit alphanumerischen Zeichen . In diesem Beispiel sind die Gitternetzlinien dynamisch, dass die Anzahl der Gitterlinien nach Koordinatenwerten ansteigt oder abnimmt. Wie man diese statische machen, dh das Diagramm so machen, wie es im Beispiel unabhängig von Koordinatenwerten ist? HINWEIS: – Durch Ändern des letzten Koordinatenwertes [17,16] […]

Wie man Svg-Code in Javascript-Code übersetzen?

Ich habe hier Stapeloverflow gelernt, dass du das Element in eine HTML-Datei wie folgt dynamisch einfügen kannst. var svgnode = document.createElementNS('http://www.w3.org/2000/svg','svg'); var path = document.createElementNS('http://www.w3.org/2000/svg','path'); path .setAttribute("d","……"); svgnode.appendChild(path); document………..appendChild(svgnode); Und es geht gut Ich erwartete, dass Sie es auch weiterhin fortsetzen können. var defs = document.createElementNS('http://www.w3.org/2000/svg','defs'); var use = document.createElementNS('http://www.w3.org/2000/svg','use'); var path2=document.createElementNS('http://www.w3.org/2000/svg','path'); path2.setAttribute("d","…."); path2.setAttribute("id","path2"); defs.appendChild(path2); […]

Wie benutzt man Snap.svg Code mehrmals?

Diese Demo . Ich möchte Icons mit Snap.svg machen, also möchte ich, dass der Endbenutzer HTML wiederholt, um mehrere Icons zu erhalten. HTML: <svg class="box"></svg> <svg class="box"></svg> <!– not work –> <svg class="box"></svg> <!– not work –> <svg class="box"></svg> <!– not work –> JS: var box = Snap(".box"); box.rect(0,0,100,100).attr({fill:f00});

Wie kann ich CSS in ein SVG manipulieren?

Ich versuche, meinen Code zu verbessern, indem ich den CSS ordnungsgemäß zuordne: isChecked = jqElement.is(':checked'); type = jqElement.attr('tag'); var start = new Date().getTime(); elements = document.getElementsByClassName(type); console.log('LAYER ' + type + ': ' + elements.length); for (j=0; j<elements.length; j++){ element = elements[j]; if (isChecked) element.classList.remove('hide-layer'); else element.classList.add('hide-layer'); //element.className += ' hide-layer'; //element.className = type; //element.setAttribute('visibility', […]

Wie bekomme ich die Position des SVG-Elements

Nun, ich habe diese Svg-Datei (Klick mich) . Nun möchte ich, dass das Tooltip-Skript die Tooltips nicht neben der Maus zeigt, sondern neben dem Element, zu dem es gehört, wenn die Maus über dem Element liegt. Jetzt weiß ich, dass die Position der Tooltip von evt.clientX / evt.clientY . Aber ich konnte keine Funktion finden […]

D3js zählt Gruppen von Kreisen

Ich versuche d3.js Zoom-Verhalten zum ersten Mal, ich bin ziemlich kämpfen, um es zu funktionieren. Meine Anforderung ist, einen Zoom zu vergrößern, verkleinern Verhalten in einem svg Element, wo Browser-Zoom-Verhalten deaktiviert werden sollte und nur die Kreise innerhalb der svg sollte erhöhen / verringern seinen Radius bei Zoom in / out. Zusammenfassend lässt sich sagen, […]

Lassen Sie uns Javascript Schönheit und nützlich machen.