JavaScript/D3:在点击时创建浮动文本框，并从文本框输入更新图形

JavaScript/D3: Create floating textbox on click and update graph from textbox input

本文关键字：文本 图形 更新 输入 D3 创建 JavaScript      更新时间：2023-09-26

我正在尝试使用D3绘制多个交互线。当单击每一行时，应该根据当前鼠标坐标显示一个浮动文本框，并等待输入来更新行坐标。一旦文本框被更改，行应该自动更新，文本框应该消失。有人能看一下我的代码并找出哪里出了问题吗?谢谢!

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
    <div id="d3_line"></div>
    <script>
        var svg = d3.select("#d3_line").append("svg")
            .attr("width", 800)
            .attr("height", 800);
        line1 = {
            "x1": 100,
            "y1": 50,
            "x2": 750,
            "y2": 500
        };
        line2 = {
            "x1": 100,
            "y1": 200,
            "x2": 750,
            "y2": 650
        };
        data = [];
        data.push(line1);
        data.push(line2);
        for (var i = 0; i < data.length; i++) {
            var line = d3.select("svg")
                .append("svg:line")
                .attr("id", ("line" + i))
                .attr("x1", data[i].x1)
                .attr("y1", data[i].y1)
                .attr("x2", data[i].x2)
                .attr("y2", data[i].y2)
                .style("stroke", "black")
                .style("stroke-width", 6)
                .on("click", function (d) {
                    var lineTextbox = $("svg").append("div").attr("id", "lineTextbox").style("left", (d3.event.pageX - 20) + "px").style("top", (d3.event.pageY - 40) + "px");
                    lineTextbox.html("new x1: <input type='text' id=new_x1></input>");
                    d3.select("#line" + i).on("change", function () {
                        this.attr("x1", $("#lineTextbox").val());
                        $("#lineTextbox").remove();
                    });
                });
        }
    </script>
</body>
</html>

正如@FernOfTheAndes指出的那样，这个想法实际上是将一个外部对象附加到svg，而不是将输入元素附加到html属性。

var svg = d3.select("#d3_line").append("svg")
            .attr("width", 800)
            .attr("height", 800);
line1 = {
    "x1": 100,
    "y1": 50,
    "x2": 750,
    "y2": 500
};
line2 = {
    "x1": 100,
    "y1": 200,
    "x2": 750,
    "y2": 650
};
var data = [];
data.push(line1);
data.push(line2);
var lineID = "";
function update() {
    d3.select("#" + lineID).attr("x1", $("#new_x1").val());
    $("#new_x1").remove();
}
for (var i = 0; i < data.length; i++) {
    var line = d3.select("svg")
        .append("svg:line")
        .attr("id", ("line" + i))
        .attr("x1", data[i].x1)
        .attr("y1", data[i].y1)
        .attr("x2", data[i].x2)
        .attr("y2", data[i].y2)
        .style("stroke", "black")
        .style("stroke-width", 6)
        .on("click", function () {
            $(".externalObject").remove();
            lineID = d3.select(this).attr("id");
            svg.append("foreignObject")
                .attr("class", "externalObject")
                .attr("x", (d3.event.pageX - 20) + "px")
                .attr("y", (d3.event.pageY - 40) + "px")
                .attr("width", 200)
                .attr("height", 100)
                .append("xhtml:div")
                .html("<input type='text' id=new_x1 placeholder='input new x1 here' onchange=update()></input>");
        });
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="d3_line"></div>

相关文章：