How to add an html form in D3?

Question

I'm trying to create an input form that appears over a node in a d3 directed force diagram when the node is clicked. The information input by the user will update the attributes of the node - such as name will change the title, and role the colour of the node etc. I've managed to get this working with one input describing one 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 trouble with adding other inputs. I was hoping that it would be possible to add an input box into the appended html function (as below) but it doesn't recognise the values, and the input box - although it does appear - doesn't allow anything to be input.

    .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 will be able to point me in the right direction.

---

I am still not able to get a pop-up input box to work. Using a variety of methods (including appendng it to the node group, appending it using .html, calling on a form in the html file, including it in the mouseup function, using tooltips etc.) and all I've managed to do is get to the same result - where I can see the input boxes but I can't edit them. I think the foreignObject is working as I can see it in the consol but I can't seem to make it editable. I must be doing something fundamentally wrong and I hope someone can point me in the right direction. Here is a fiddle of the complete code so far - https://jsfiddle.net/VGerrard/91e7d5g9/2/

Answer 1

you forgot to add + between the string and the values, this might get what you're trying to do

.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 + ">"
})