使用d3（v5）和bootstrap（v3.3.7）创建列表项网格

Question

我正在尝试使用d3创建给定数据对象矩阵的引导列表组列（示例here）。但是，创建锚点list-group-item之后，我的输入/更新模式就会崩溃。我创建了一个小提琴here来演示问题。

let data=[
  [{h:'a',p:'aa'},{h:'b',p:'bb'},{h:'c',p:'cc'}],
  [{h:'d',p:'dd'},{h:'e',p:'ee'},{h:'f',p:'ff'}],
  [{h:'g',p:'gg'},{h:'h',p:'hh'}]
]

let row = d3.select('div.row');
let col = row.selectAll('div')
  .data(data, JSON.stringify)

let newlg = col.enter().append('div')
  .classed('col-xs-3', true)
  .append('div')
  .classed('list-group', true);

let lg = d3.selectAll('div.col-xs3 > div.list-group');
let mergelg = newlg.merge(lg);
let lgitem = mergelg.selectAll('a')
  .data((d)=>d, JSON.stringify);
let newlgitem = lgitem.enter()
  .append('a')
  .attr('href','#')
  .classed('list-gorup-item', true)
  .on('click', function(d){
    console.log('DO SOMETHIGN with:'+JSON.stringify(d));
  });

let lgHeading  = newlgitem.merge(lgitem)
  .selectAll('h3')
  .data((d)=>d, function(d, i, nodes){
    return JSON.stringify(d);
    });
let newLgHeading = lgHeading.enter()
  .append('h3')
  .classed('list-group-item-heading', true)
  .merge(lgHeading)
  .text(d=>d.h);

let lgBody = newlgitem.merge(lgitem)
  .selectAll('p')
  .data((d)=>d, JSON.stringify);
let newLgBody = lgBody.enter()
  .append('p')
  .classed('list-group-item-text', true)
  .text(d=>d.p);