如何在D3中添加html表单？

概述我正在尝试创建一个输入表单,该表单在单击节点时出现在d3定向力图中的节点上.用户输入的信息将更新节点的属性 – 例如名称将更改标题,角色是节点的颜色等.我已设法使用一个输入来描述具有以下功能的一个属性： function nodeForm(d) { var p = this.parentNode; var el = d3.select(this); var p_el = d 我正在尝试创建一个输入表单,该表单在单击节点时出现在d3定向力图中的节点上.用户输入的信息将更新节点的属性 – 例如名称将更改标题,角色是节点的颜色等.我已设法使用一个输入来描述具有以下功能的一个属性：

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

现在我在添加其他输入时遇到了麻烦.我希望可以在附加的HTML函数中添加一个输入框(如下所示),但它不能识别这些值,输入框 – 虽然它确实出现 – 不允许输入任何内容.

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

我对编程非常陌生,希望有人能指出我正确的方向.

我仍然无法使用d出式输入框.使用各种方法(包括将它附加到节点组,使用.HTML附加它,调用HTML文件中的表单,包括它在mouseup函数中,使用工具提示等)以及我设法做的所有方法是得到相同的结果 – 我可以看到输入框但我无法编辑它们.我认为foreignObject正在工作,因为我可以在consol中看到它,但我似乎无法使其可编辑.我必须做一些根本错误的事情,我希望有人能指出我正确的方向.这是迄今为止完整代码的小提琴 – https://jsfiddle.net/VGerrard/91e7d5g9/2/

解决方法 你忘了在字符串和值之间添加,这可能会得到你想要做的事情

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

总结

以上是内存溢出为你收集整理的如何在D3中添加html表单？全部内容，希望文章能够帮你解决如何在D3中添加html表单？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。