score:3

Accepted answer

The color.domain array is empty when you join it with the .legend selection, so no 'g' elements are appended.

The color.domain array is populated later in your code, when you append the circles to your nodes selection.

If you switch the order, then the legend items are created:

var node = svg
  .selectAll('circle')
  .data(nodes)
  .enter()
  .append('g')
      .call(force.drag)

////MOVED BEFORE THE LEGEND CODE
node
  .append('circle')
  .style('fill', function (d) {
    return color(d.cluster)
  })
  .attr('r', function (d) {
    return d.radius
  })

var legend = svg
  .selectAll('.legend')
  .data(color.domain())
  .enter()
  .append('g')
  .attr('class', 'legend')
  .attr('transform', function (d, i) {
    var height = legendRectSize + legendSpacing
    var offset = height * color.domain().length / 2
    var horz = -2 * legendRectSize
    var vert = i * height - offset
    return 'translate(' + horz + ',' + vert + ')'
  })

legend
  .append('rect')
  .attr('width', legendRectSize)
  .attr('height', legendRectSize)
  .style('fill', color)
  .style('stroke', color)

legend
  .append('text')
  .attr('x', legendRectSize + legendSpacing)
  .attr('y', legendRectSize - legendSpacing)
  .text(function (d) {
    return 'Hans'
  })

PS: Some of the legend items are currently being translated off the SVG view, so your horz and vert variables need looking at.


Related Query

More Query from same tag