javascript - D3.js HTML input to json file

Question

I created a very simple D3 forced graph and used an data.json file which holds the nodes and links. Further I created a simple form for user interaction. My brain is somehow stuck, I want to push and the user data to the data.json file and reload the graph with the added node.

I am aware how to add user input into an array but since the data.json file contains nodes and links I am pretty confused and how to push the data correctly into the right place. In case any of you faced a similar situation and may know a hint or even better the solution I would be glad.

Unfortunately the code doesn′t run with the help of the embedded function but locally its fine.

// define cavnas area to draw everything
var svg = d3.select("body").append("svg")
            .attr("class", "canvas")
            .attr("width", window.innerWidth)
            .attr("height", window.innerHeight)
            .call(d3.zoom().on("zoom", function() {
                svg.attr("transform", d3.event.transform)
            }))
            .append("g")

var simulation = d3.forceSimulation()
                .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(100))
                .force("charge", d3.forceManyBody().strength(-20000))
                .force("center", d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2))
                .force("attraceForce",d3.forceManyBody().strength(50));

            
// load data from json file
d3.json("data.json", function(error, graph) {
    if (error) throw error

    // create links which visualize relationships
    var link = svg.selectAll("svg")
                .data(graph.links) 
                .enter()
                    .append("line")
                    .attr("class", "link")
                    .style("stroke-width", 3)
                    .style("stroke-linecap", "round")

    // create nodes which visualize the objects
    var node = svg.selectAll("svg")
                .data(graph.nodes)
                .attr("id", "nodeTooltip")
                .enter()
                    .append("circle")
                    .attr("id", "nodeTooltip")
                    .attr("r", 50)
                    .attr("class", "node")
                    .call(d3.drag()
                        .on("start", dragstarted)
                        .on("drag", dragged)
                        .on("end", dragended)
                    )
    
    var icon = svg.selectAll("svg")
                .data(graph.nodes)
                .attr("id", "nodeTooltip")
                .enter()
                    .append("text")
                    .attr("id", "nodeTooltip")
                    .attr("class", "icon")
                    .attr('text-anchor', 'middle')
                    .attr('dominant-baseline', 'central')
                    .style('font-family','FontAwesome')
                    .style('font-size','50px')
                    .text(function (d) {return d.icon;})
    
    simulation
        .nodes(graph.nodes)
        .on("tick", ticked);
    simulation
        .force("link")
        .links(graph.links);

    function ticked() {

        // update link positions
        link
            .attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });
      
        // update node positions
        node
            .attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; })

        // update icon positions
        icon
            .attr("x", function(d) {return d.x})
            .attr("y", function(d) {return d.y})
    }

    var tooltip = d3.select("svg")
                    .append("div")
                        .style("position", "absolute")
                        .style("visibility", "hidden")
                        .style("background-color", "white")
                        .style("border", "solid")
                        .style("border-width", "1px")
                        .style("border-radius", "5px")
                        .style("padding", "10px")
                        .html("<p>I'm a tooltip written in HTML</p><img src='https://github.com/holtzy/D3-graph-gallery/blob/master/img/section/ArcSmal.png?raw=true'></img><br>Fancy<br><span style='font-size: 40px;'>Isn't it?</span>");

    d3.select("#nodeTooltip")
      .on("mouseover", function(){return tooltip2.style("visibility", "visible");})
      .on("mousemove", function(){return tooltip2.style("top", (event.pageY-2390)+"px").style("left",(event.pageX-800)+"px");})
      .on("mouseout", function(){return tooltip2.style("visibility", "hidden");});

})


// independend functions

function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
}
    
function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
}
    
function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
}

{
    "nodes": [
        {
            "id": "00001", 
            "type": "server", 
            "name": "s02vmware", 
            "context": "Jira",
            "icon": "uf113"
        },
        {
            "id": "00002", 
            "type": "server", 
            "name": "v133atlas", 
            "context": "Jira",
            "icon": "uf092"
        },
        {
            "id": "00003",
            "type": "software", 
            "name": "Linux", 
            "context": "Jira",
            "icon": "uf2a5"
        }
    ],
    
    "links": [
        {"source": "00001", "target": "00002", "context": "Jira"},
        {"source": "00002", "target": "00003", "context": "Jira"}
    ]
}

<!DOCTYPE html>
<meta charset="utf-8">
<html>
    <head>
        <title>iDEP D3v6 Machbarkeitsstudie</title>
        <!-- embedd stylesheet -->
        <link rel="stylesheet" href="style.css">
        <!-- call external d3.js framework -->
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <!-- load external icons -->
        <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>

    <body>
        <!-- input form to add new objects -->
        <form>
            <div class="formBox">
                <label for="object">Objekt</label>
                <input type="text" id=name placehilder="Objekt"/>
            </div>
            <div class="formBox">
                <label for="type">Typ</label>
                <input type="text" id=name placehilder="Typ"/>
            </div>
            <div class="formBox">
                <label for="context">Kontext</label>
                <input type="text" id=name placehilder="Kontext"/>
            </div>
            <div class="formBox">
                <button id="btn">Hinzufügen</button>
            </div>
        </form>      




        <!-- call app.js script where the  application is written -->
        <script src="app.js"></script>
        <!-- load navigation -->
        <link rel = "navigation.html">
        <!-- html div container for the tooltip -->
        <div id="tooltip"></div>
       
    </body>
</html>

Answer 1

等待大神答复