我正在尝试创建一个输入表单,当单击节点时,该表单出现在 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 …Run Code Online (Sandbox Code Playgroud)