小编Ger*_*ard的帖子

如何在 D3 中添加 html 表单?

我正在尝试创建一个输入表单,当单击节点时,该表单出现在 d3 定向力图中的节点上。用户输入的信息将更新节点的属性 - 例如名称将更改标题,角色将更改节点的颜色等。我设法使用一个描述一个属性的输入来实现这一点,并具有以下功能:

    function nodeForm(d) {
    var p = this.parentNode;
    var el = d3.select(this);
    var p_el = d3.select(p);

    var form = p_el.append("foreignObject");

    var input = form
    .attr("width", 300)
    .attr("height", 100)
    .attr("class", "input")
    .append("xhtml:form")
    .html(function(d) {return "<strong>Name:</strong>"}) 
    .append("input")
    .attr("value", function(d) {this.focus(); return d.name})
    .attr("style", "width: 200px;")
    .on("keypress", function() {

           if (!d3.event)
            d3.event = window.event;

            //Prevents total update
            var e = d3.event;
            if (e.keyCode == 13){
            if (typeof(e.cancelBubble) !== 'undefined') // IE
                e.cancelBubble = true;
            if (e.stopPropagation)
                e.stopPropagation();
                e.preventDefault();

            var …
Run Code Online (Sandbox Code Playgroud)

html forms input d3.js

5
推荐指数
1
解决办法
2104
查看次数

标签 统计

d3.js ×1

forms ×1

html ×1

input ×1