html表格中加函数,如何在D3中添加html表单？

我试图创建一个输入窗体，该窗体在点击节点时在d3有向力图中显示在一个节点上。用户输入的信息会更新节点的属性 - 比如名称会改变标题，角色是节点的颜色等等。我设法用一个输入来描述一个属性，使用下面的函数：如何在D3中添加html表单？

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 "Name:"})

.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; });

}

})

}

现在我无法添加其他输入。我希望能够将输入框添加到附加的html函数中(如下所示)，但它不能识别这些值，并且输入框(虽然确实出现)不允许输入任何内容。

.html(function(d) {return "Name: Role: Name: "})

我对编程非常陌生，希望有人能够指引我走向正确的方向。

我仍然无法获得弹出式输入框的工作。使用各种方法(包括将其附加到节点组中，使用.html附加它，在html文件中调用一个表单，使用工具提示将其包含在mouseup函数中)，我所做的一切就是得到相同的结果 - 我可以看到输入框但我无法编辑它们。我认为foreignobject正在工作，因为我可以在consol中看到它，但我似乎无法使其可编辑。我一定在做一些根本性错误的事情，希望有人能指出我正确的方向。下面是完整的代码的小提琴至今 - https://jsfiddle.net/VGerrard/91e7d5g9/2/

2015-04-28

Gerrard