Добавление легенды в d3. js силовой ориентированный график

Question

Я пытаюсь добавить легенду к d3. js График с направлением силы. У меня график без легенды работает отлично. Я следую инструкциям на https://gist.github.com/ZJONSSON/3918369 Вот части, в которых я изменил код:

  const node = svg.append("g")
      .attr("stroke", "#fff")
      .attr("stroke-width", 1.5)
      .selectAll("circle")
      .data(nodes)
      .join("circle")
      .attr("r", 7)
      .attr("fill", color )
      .attr("data-legend",function(d) { return d.lineage}) // XXX: added for legend
      .call(drag(simulation));

  node.append("title")
      .text(d => d.id);

// added this block    
  legend = svg.append("g")
    .attr("class","legend")
    .attr("transform","translate(50,30)")
    .style("font-size","12px")
    .call(d3.legend)

// end add block          

Как только я добавляю часть между // added this block, я получаю сообщение об ошибке chart = TypeError: Cannot read property 'apply' of undefined . Я раскрашиваю узлы по происхождению свойств каждого узла.

Что мне здесь не хватает?