Question

我试图用d3追加一个输入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并使用唯一ID获取带有d3的html元素也不会返回字段＆＃34; text＆＃34;，＆＃34; value＆＃34;或类似的东西。当我使用chrome控制台检查html时，输入标记就是以下内容：

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

因此没有赋值属性。

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

d3.selectAll('input')

更新这是JSFiddle的更新版本：jsfiddle.net/jeannedark/8e96hef6/7 这个用例是否可以用d3？如果没有最好的方法/框架来实现这一点，而不是附加一个平面html元素。我真的很感激d3风格的添加属性等。

d3读取输入值

0 个答案: