Drop-Down-Menü in Force - Layout einfügen?

[milesdavis]

Hey Leute,

wenn ich in D3.js nur diesen Code

<script>
var select = d3.select('body').append('select')
</script>

verwende, erscheint ein Weißer Bildschirm mit einem leeren Drop-Down-Menü oben links.
Nun würde ich dieses Drop-Down-Menü gern in ein Force-Layout einfügen, etwa in das von dieser Seite: https://bl.ocks.org/mbostock/4062045

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

d3.json("miserables.json", function(error, graph) {
  if (error) throw error;

  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
      .attr("r", 5)
      .attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  node.append("title")
      .text(function(d) { return d.id; });

  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(graph.links);

  function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

Leider funktioniert es nicht, weil das Drop-Down-Menü nicht im Force-Layout erscheint.
Weiss jemand vielleicht Rat?
Vielen Dank

Beste Grüße

 

[kkapsner]

Leider funktioniert es nicht, weil das Drop-Down-Menü nicht im Force-Layout erscheint.

Ist denn das select überhaupt im dem Netzwerk eingebunden? Aber hast du überhaupt irgendwo eine Information gefunden, ob man "normale" HTML-Nodes überhaupt da einbinden kann? Die Nodes im Netzwerk werden ja in einem <canvas> gezeichnet und das <select> wird vom Browser selbst gerendert.

 

[milesdavis]

Ist denn das select überhaupt im dem Netzwerk eingebunden? Aber hast du überhaupt irgendwo eine Information gefunden, ob man "normale" HTML-Nodes überhaupt da einbinden kann? Die Nodes im Netzwerk werden ja in einem <canvas> gezeichnet und das <select> wird vom Browser selbst gerendert.

Meinst du die Variable

var select

oder diesen Teil

.append('select')

?

Bezüglich der Frage, ob ich eine Information habe, ob man "normale" HTML-Nodes in das Netzwerk einbinden kann.
Also in diesem Bespiel unten hat man HTML-Elemente, SVG-Elemente und Div-Elemente alle in einem Force Layout. Meintest du das?
http://bl.ocks.org/sxv/4491174

 

[kkapsner]

Meinst du die Variable [...] oder diesen Teil [...] ?

Eigentlich den Inhalt der Variable.

Also in diesem Bespiel

In welchem Beispiel? Das, das du oben geschrieben hast? Wo ist da was anderes als SVG-Elemente?

 

[milesdavis]

Eigentlich den Inhalt der Variable.


In welchem Beispiel? Das, das du oben geschrieben hast? Wo ist da was anderes als SVG-Elemente?

habe meinen post editiert, hatte den link vergessen

- - - Aktualisiert - - -

Übrigens klappt es mit einem Drop-Down-Menü, wenn ich es mit HTML mache:

<select id="inds">
		<option value="apples" selected="selected">apples</option>
		<option value="pears">pears</option>
		<option value="tomatoes">tomatoes</option>
</select>

Wollte es aber eigentlich mit dem D3.js code hinkriegen

 

[kkapsner]

Übrigens klappt es mit einem Drop-Down-Menü, wenn ich es mit HTML mache

Dann sollte das auch mit einem dynamisch erstellen funktionieren. Wie hast du denn dieses in das Netzwerk reinbekommen?

 

[milesdavis]

Dann sollte das auch mit einem dynamisch erstellen funktionieren. Wie hast du denn dieses in das Netzwerk reinbekommen?

na einfach den code oben reingeschrieben, danach ist das ding auf dem bildschirm erschienen. oder meist du was anderes?

 

[kkapsner]

Auf dem Bildschirm erscheint ja in beiden Varianten was, aber anscheinend ist ja nur in der HTML Variante die Node auch in der Kraftsimulation drin. Du muss ja irgendwo definiert, haben, dass sie da rein soll.