javascript - How can I bind data.key --> element.id on existing markup in d3js? -

i have existing <svg> , have defined groups <g> each group has own unique id.

<g id="id_1"><text>...</text></g> <g id="id_2"><text>...</text></g> <g id="id_3"><text>...</text></g> <g id="id_4"><text>...</text></g> 

similarly have data formatted as

data = { "id_2" : { "name" : value1, "description" : value2, ... },           "id_4" : { "name" : value1, "description" : value2, ... },           "id_9" : { "name" : value1, "description" : value2, ... } }; 

for each row. notice not id's match!

i not wish replace <g>, instead bind each data row correct <g> tag id's match. default behavior of d3.select('g').data(d3.values(data)) not support bind index. how can this?

i have sample code @ jsbin indexed data binding can modify.

http://jsbin.com/qifale/1/edit

you missing remove command. add nodesupdate.exit().remove(); remove unmapped svg elements. need change .data(d3.values) .data(d3.entries) ensure keys match up.

var data = {    "id_2": {      "name": "john doe",      "description": "a common fella"    },    "id_4": {      "name": "ann lady",      "description": "has long hair"    },    "id_8": {      "name": "luke force",      "description": "green lightsaber"    }  };    window.addeventlistener("load", function() {    bind(data);  });    function bind(data) {      // svg element    var svg = d3.select("svg");      // select , bind data index    nodesupdate = svg      .selectall("g")      .data(d3.entries(data));      // update data    nodesupdate      .select("text")      .text(function(d) {        return d.value.name + " : " + d.value.description;      });      nodesupdate.exit().remove();      // want though match data such data[id_2] matched    // <g class="id_2"> , on. nodes 1 , 3 should not included in update set!  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>  <svg style="">    <g id="id_1" transform="translate(20, 30)">      <text>-- 1 --</text>    </g>    <g id="id_2" transform="translate(20, 60)">      <text>-- 2 --</text>    </g>    <g id="id_3" transform="translate(20, 90)">      <text>-- 3 --</text>    </g>    <g id="id_4" transform="translate(20, 120)">      <text>-- 4 --</text>    </g>  </svg>