javascript - 如何将 data.key --> element.id 绑定(bind)到 d3js 中的现有标记上？

Question

我有一个现有的 <svg>我已经定义了组 <g>其中每个组都有自己唯一的 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>

同样，我的数据格式为

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

对于每一行。请注意，并非所有 id 都匹配!

我不想替换 <g> ，相反，我想将每个数据行绑定(bind)到正确的 <g> id 匹配的标记。 d3.select('g').data(d3.values(data)) 的默认行为不支持这一点，因为它将通过索引绑定(bind)。我怎样才能做到这一点？

我在 jsbin 中有示例代码，其中包含您可以修改的索引数据绑定(bind)。

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

Answer 1

您缺少删除命令。添加 nodesUpdate.exit().remove(); 以删除未映射的 svg 元素。您还需要将 .data(d3.values) 更改为 .data(d3.entries) 以确保键匹配。

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) {

  // get svg element
  var svg = d3.select("svg");

  // select and bind data by index
  nodesUpdate = svg
    .selectAll("g")
    .data(d3.entries(data));

  // update the data
  nodesUpdate
    .select("text")
    .text(function(d) {
      return d.value.Name + " : " + d.value.Description;
    });

  nodesUpdate.exit().remove();

  // What I really want though is to match the data such that data[id_2] is matched
  // to <g class="id_2"> and so on. Nodes 1 and 3 should not be included in the 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>