Javascript 使用HTML输入更新数据值并更改数据数组

我想更新单击形状时在

中显示的形状标签、x位置和y位置值。

用户编辑表单字段以根据需要更改值，然后单击提交将更改（如果有）写回JSON数组

我在矩形的

“click”

事件中构建了表单，该事件也会触发不透明度，以在页面顶部的

中显示表单：

.on("click", function(d){
  d3.select("#rectInfo").style("opacity", 1);

  var infoForm = d3.select("#rectInfo").append("form")
   .attr("id", "foo")
   .attr("action", "javascript:submitForm();")
   .attr("method", "post")
   .attr("class", "formEle");

显示器工作正常。但是，我不知道如何将表单中的值推回JSON数组。函数的作用是：只清除div修道院

function submitForm(){
  d3.selectAll(".formEle").remove();
  d3.select("#rectInfo").style("opacity", 0);
}

如何将表单中的值返回到JSON数组中？

根据，您不会将此信息发送到任何地方。因此，您不需要表单

所以，只需将常规文本输入附加到该div

var div = d3.select("#rectInfo")

var labelText = div.append("p")
    .text("Label: ");

var labelInput = labelText.append("input")
    .attr("size", "15")
    .attr("type", "text")
    .attr("value", d.label);

var xPosText = div.append("p")
    .text("X pos: ");

var xPosInput = xPosText.append("input")
    .attr("size", "15")
    .attr("type", "text")
    .attr("value", d.x);

var yPosText = div.append("p")
    .text("Y pos: ");

var yPosInput = yPosText.append("input")
    .attr("size", "15")
    .attr("type", "text")
    .attr("value", d.y);

。。。并创建一个按钮，该按钮在“单击”时获取输入值，并更改

x

、

y

和

标签的属性：

var button = div.append("button")
    .text("Submit/Hide")
    .on("click", function() {
        d3.select(self).attr("x", function(d) {
            return d.x = +xPosInput.node().value
        }).attr("y", function(d) {
            return d.y = +yPosInput.node().value
        });
        d3.select("#text" + i).text(function(d) {
                return "Label: " + (d.label = labelInput.node().value);
            })
            .attr("x", function(d) {
                return d.x = +xPosInput.node().value + 10
            }).attr("y", function(d) {
                return d.y = +yPosInput.node().value + 10
            });
    })

注意这个模式：

return d.x = +xPosInput.node().value

它做两件事：

它返回一个值（在本例中为
+xPosInput.node（）.value
）
它将该值赋给
d.x
，从而更改我们的数据
此外，即使用户键入一个数字，输入也会返回一个字符串。。。这就是为什么在上面的示例中，在
xPosInput.node（）.value
之前有一个一元加号运算符的原因

最后，我不喜欢删除/重新添加元素（我说的是div）。你可以简单地更新它们。然而，正如我在另一个答案中告诉你们的，这是一个不同的问题，在S.O.这里，我们试图每个问题只保留一个问题（因此，我在这个答案中不涉及它）

以下是您的代码和这些更改：


var rectInfoActive=false；
变量rectData=[{
“标签”：“一个”，
“x”：100，
“y”：50，
“高度”：100，
“宽度”：120，
“颜色”：“绿色”
}, {
“标签”：“两个”，
“x”：250，
“y”：50，
“高度”：100，
“宽度”：120，
“颜色”：“紫色”
}, {
"标签":"三",，
“x”：400，
“y”：50，
“高度”：100，
“宽度”：120，
“颜色”：“红色”
}];
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，600）
.attr（“高度”，200）；
var rects=svg.selectAll（“rect”）
.数据（rectData）
.输入（）
.附加（“g”）；
rects.append（“rect”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，函数（d）{
返回d.y；
})
.attr（“高度”，功能（d）{
返回d.高度；
})
.attr（“宽度”，函数（d）{
返回d.width；
})
.样式（“填充”，功能（d）{
返回d.color；
})
.on（'mouseover'，函数（d）{
var rectSelection=d3.选择（此）
.风格({
不透明度：“0.5”
})
})
.on（'mouseout'，函数（d）{
var rectSelection=d3.选择（此）
.风格({
不透明度：“1”
})
})
.on（“点击”），功能（d，i）{
var self=这个；
if（rectInfoActive==true）{
//在显示上一个信息块时单击了一个节点
d3.选择全部（“输入”）。删除（）；
d3.选择全部（“.formEle”）.remove（）；
d3.选择（“#rectInfo”）.selectAll（“*”）.remove（）；
d3.选择（“#rectInfo”）.style（“不透明度”，0）；
}
d3.选择（“#rectInfo”）.style（“不透明”，1）；
//在/div中显示的表单在单击rect时变为可见。
//“提交”按钮清除表单。尚未更新数据。
var div=d3。选择（“rectInfo”）
var labelText=div.append（“p”）
.text（“标签：”）；
var labelInput=labelText.append（“输入”）
.attr（“尺寸”、“15”）
.attr（“类型”、“文本”）
.attr（“值”，d.标签）；
var xPosText=div.append（“p”）
.文本（“X位置：”）；
var xPosInput=xPosText.append（“输入”）
.attr（“尺寸”、“15”）
.attr（“类型”、“文本”）
.attr（“值”，d.x）；
var yPosText=div.append（“p”）
.文本（“Y位置：”）；
var yPosInput=yPosText.append（“输入”）
.attr（“尺寸”、“15”）
.attr（“类型”、“文本”）
.attr（“价值”，d.y）；
var按钮=div.append（“按钮”）
.text（“提交/隐藏”）
.on（“单击”，函数（）{
d3.选择（自）.attr（“x”，函数（d）{
返回d.x=+xPosInput.node（）.value
}).attr（“y”，函数（d）{
返回d.y=+yPosInput.node（）.value
});
d3.选择（“#文本”+i）。文本（功能（d）{
返回“Label:”+（d.Label=labelInput.node（）.value）；
})
.attr（“x”，函数（d）{
返回d.x=+xPosInput.node（）.value+10
}).attr（“y”，函数（d）{
返回d.y=+yPosInput.node（）.value+10
});
d3.选择（“#rectInfo”）.selectAll（“*”）.remove（）；
d3.选择（“#rectInfo”）.style（“不透明度”，0）；
})
rectInfoActive=true；
});
//形式结束
//矩形标签
rects.append（“文本”）
.attr（“id”，函数（d，i）{
返回“text”+i
})
.样式（“填充”、“黑色”）
.attr（“dy”，“.35em”）
.attr（“x”，函数（d）{
返回d.x+10；
})
.attr（“y”，函数（d）{
返回d.y+10；
})
.文本（功能（d）{
return“Label:+d.Label
});
//杂项功能-------------------------------------------------------------
//清除模板----
//清除表单和输入值。这将在以后成为更新函数
//这将把更改后的值更新回JSON数组。
#rectInfo{
背景色：白色；
位置：相对位置；
填充：10px；
宽度：230px；
高度：100px；
边界：2px；
轮廓：灰色实薄；
}
#rectinfop{
保证金：4倍；
}
.formLabel{
字体系列：信使；
}

为什么要使用表单？你要把这些数据发送到其他地方吗？在我看来，您只是想更改加载的数据。。。如果这是正确的，你不应该使用表单。你是正确的。我只想更新数据，不需要是表单。数据保留在页面中。在我之前的帖子（）中，你说我的问题太广泛，所以我进一步发展了m