Question

我遇到了一个奇怪的场景，使用D3创建一个简单的形式体验。

流程就像这样......

1）使用D3创建元素，默认值为

2）将一个函数绑定到一个按钮以读取该文本区域的值并执行操作

var content = d3.select('#content');
            content.append('div')
                    .append("input")
                    .attr("type", "text")
                    .attr("id", "textinput")
                    .attr("size", "40")
                    .attr("value","Default Text");

            content.append('div')
                    .html('Get contents...')
                    .on("click", function () {
                        console.log("D3 Selection: " + d3.select("#textinput").attr('value'));
                        console.log("DOM Selection: " + document.getElementById("textinput").value);
                    });

DOM选择的值是用户输入的值，D3选择的值始终为＆＃34;默认文本＆＃34;，无论用户输入了什么：

D3 Selection: Default Text
DOM Selection: I typed something

我缺少什么（除了显而易见的知识，技能等等 - 在我的辩护中，我主要只是为了好玩而这样做）？ D3选择器不应该以这种方式运行吗？

戴夫

Answer 1

不应使用.attr（），而应使用.property（）代替。

根据：https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#property

某些HTML元素具有使用标准属性或样式无法寻址的特殊属性。例如，表单文本字段具有value字符串属性，而复选框具有checked布尔属性。您可以使用属性运算符来获取或设置这些属性，或基础元素上的任何其他可寻址字段，例如className。

您可以通过.attr（）方法设置值但不能获取它的原因是因为.attr（）与底层HTML交互。用户交互不会影响HTML，因此当您通过.attr（）时，这些更改不会反映出来。

修改：更新了d3v3 API的链接。对于d3v4也是如此，尽管描述略有不同：https://github.com/d3/d3-selection/blob/master/README.md#selection_property

Answer 2

如果您调用了以下内容，您将从DOM获得相同的“默认文本”：

document.getElementById("textinput").getAttribute("value")

您可以先从访问node()的d3选项中获取输入值：

d3.select("#textinput").node().value

Answer 3

使用.property('value')代替.attr('value')。

Answer 4

当你这样做时

.attr("id", "textinput")
.attr("size", "40")
.attr("value","Default Text");

您正在为#textinput元素提供值=默认文本即：

<div id="textinput" value="Default Text"></div>

所以你没有制作它的innerHTML默认文本，但你给它一个像类一样的属性。在控制台中，您需要选择d3来获取该值。

简单的D3.js文本选择

4 个答案: