D3 读取输入值

Question

我正在尝试使用d3添加一个input HTML元素并在其更改时读取文本值：

$scope.addField = function (parent) {
        parent.append("br");
        parent.append("input")
            .attr("type", "input")
            .attr("placeholder", "Add a comment ...")
            .property("value", function (value) {
                console.log("value: " + value);     // logs: "value: undefined"
            })
            .text(function (value) {
                console.log("text: " + value);      // logs: "text: undefined"
            })
            .on("input", function (value) {
                console.log("oninput: "+ value)     // logs: "oninput: undefined"
            })
            .attr("id", ID_PREFIX + $scope.selection.id)
            .attr("value", "hallo")
            .on("change", function(d, i) {
                console.log("change: " + d + " " + i); // logs: change: undefined 0
                $scope.$apply(function () {
                    const elem = d3.select("#" + ID_PREFIX + $scope.selection.id)
                                    .select("input");
                    console.log(elem);
                    // returns the html element but without the proper text information
                    $scope.setAnnotationComment({item: $scope.selection}, $scope.comment);
                });
            });
        parent.append("br");
};

所以我无法获取输入字段的更改值。即使分配了唯一的ID并使用d3获取具有唯一ID的HTML元素，也不会返回“text”，“value”或类似的字段。当我使用chrome控制台检查html时，输入标记只是以下内容:

<input type="input" placeholder="Add a comment ...">

因此，没有分配值属性。

还有其他可能性吗？我想避免选择所有输入字段，例如：

d3.selectAll('input')

更新： 这里是JSFiddle的更新版本：jsfiddle.net/jeannedark/8e96hef6/7 这个d3使用情况是否可行？如果不行，那么实现此目的的最佳方式/框架是什么？我真的很欣赏d3添加属性等的风格，而不需要添加平面HTML元素。

- Rooky

---

你能把这个做成一个 jsfiddle 吗？ - kmandov

非常抱歉回复晚了。这是 JSFiddle 链接： https://jsfiddle.net/jeannedark/8e96hef6/5/ - Rooky

Answer 1

这个问题曾经让我抓狂，直到我在查找其他内容时浏览了D3js文档，发现了这个：

一些HTML元素具有特殊属性，这些属性不能使用属性或样式进行寻址，例如表单字段的文本值和复选框的选中布尔值。

使用selection.property(name[, value])获取所需数据。

- Skouzini