How to add html form in D3?

Question

I am trying to create an input form that appears above a node in a d3 directional force diagram when a node button is clicked. Information entered by the user will update the attributes of the node - for example, the name will change the title, as well as the role of the color of the node, etc. I managed to get this to work with a single input describing a single attribute with the following function:

    function nodeForm(d) {
    var p = this.parentNode;
    var el = d3.select(this);
    var p_el = d3.select(p);

    var form = p_el.append("foreignObject");

    var input = form
    .attr("width", 300)
    .attr("height", 100)
    .attr("class", "input")
    .append("xhtml:form")
    .html(function(d) {return "<strong>Name:</strong>"}) 
    .append("input")
    .attr("value", function(d) {this.focus(); return d.name})
    .attr("style", "width: 200px;")
    .on("keypress", function() {

           if (!d3.event)
            d3.event = window.event;

            //Prevents total update
            var e = d3.event;
            if (e.keyCode == 13){
            if (typeof(e.cancelBubble) !== 'undefined') // IE
                e.cancelBubble = true;
            if (e.stopPropagation)
                e.stopPropagation();
                e.preventDefault();

            var text = input.node().value;

            d.name = text;
            el.text(function(d) { return d.name; });

            }
        })
}

Now I am having problems adding other inputs. I was hoping that you could add an input window to the added html function (as shown below), but it does not recognize the values, and the input field - although it appears - does not allow you to enter anything.

    .html(function(d) {return "<strong>Name:</strong> <input type = 'text' value = "d.name"> <br> <strong>Role:</strong> <input type = 'text' value = "d.role"> <br> <strong>Name:</strong> <input type = 'text' value = "d.tribe">"})

I am very new to programming, and hopefully someone can point me in the right direction.

---

. ( node, .html, html , mouseup, ..), , do - - , . , foreignObject , , . - , , - . - https://jsfiddle.net/VGerrard/91e7d5g9/2/

Answer 1

+ , ,

.html(function(d) {
    return "<strong>Name:</strong> <input type = 'text'
     value = " + d.name + "> <br> <strong>Role:</strong> <input type =
     'text' value = " + d.role + "> <br> <strong>Name:</strong> <input type
     = 'text' value = " + d.tribe + ">"
})