D3 graph node text selection

by Philippe Guglielmetti

HTML

<svg width="800" height="500">
    <defs>
        <marker id="arrow" viewBox="0 -5 10 10" refX="15" refY="-1.5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M0,-5L10,0L0,5"></path>
        </marker>
    </defs>
    <g class="node" id="1" cx="449.43184808064905" cy="118.50841245843272" transform="translate(449.43184808064905,118.50841245843272)">
        <rect class="p" x="-25" y="-10" width="50" height="20" title="Edit Me!"></rect>
        <text id="1" text-anchor="middle" dominant-baseline="central">new</text>
    </g>
    <g class="node" id="2" cx="435.1255882223698" cy="244.36520036125688" transform="translate(435.1255882223698,244.36520036125688)">
        <rect class="s" x="-25" y="-10" width="50" height="20" title="Edit Me!"></rect>
        <text id="2" text-anchor="middle" dominant-baseline="central">new</text>
    </g>
    <g class="node" id="3" cx="437.97022741036" cy="385.85442575812095" transform="translate(437.97022741036,385.85442575812095)">
        <rect class="p" x="-25" y="-10" width="50" height="20" title="Edit Me!"></rect>
        <text id="3" text-anchor="middle" dominant-baseline="central">new</text>
    </g>
    <g class="node" id="4" cx="291.5148103272226" cy="187.73018944033709" transform="translate(291.5148103272226,187.73018944033709)">
        <rect class="p" x="-25" y="-10" width="50" height="20" title="Edit Me!"></rect>
        <text id="4" text-anchor="middle" dominant-baseline="central">new</text>
    </g>
    <g class="node" id="5" cx="158.02820977856732" cy="145.24716335193455" transform="translate(158.02820977856732,145.24716335193455)">
        <rect class="s" x="-25" y="-10" width="50" height="20" title="Edit Me!"></rect>
        <text id="5" text-anchor="middle" dominant-baseline="central">new</text>
    </g>
    <g class="node" id="6" cx="333.3929157957526" cy="298.92159785252045" transform="translate(333.3929157957526,298.92159785252045)">
        <rect class="p" x="-25" y="-10" width="50" height="20"...

CSS

.link {
    fill: none;
    stroke: #C2D8EB;
    /* BOBST-SAP blue */
    stroke-width: 1.5px;
}
rect {
    fill: none;
    stroke-width: 1.5px;
    pointer-events: all;
}
.p {
    stroke : #EBC1D8;
    /* BOBST-SAP red */
}
.s {
    stroke : #C3EBC1;
    /* BOBST-SAP green */
}
text {
    font: 10px sans-serif;
    pointer-events: none;
    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
.cursor {
    fill: none;
    stroke: brown;
    pointer-events: none;
}

JavaScript

var form=document.form;

d3.select("#id_label").on("input", function (d) {
    var g = d3.select(".node#\\" + form.id.value);
    console.log(g[0][0]);
    var t = d3.select("text#\\" + form.id.value);
    var s = t.text();
    t.text(this.value);
});