向D3中的条形图添加图例

Question

I have a hierarchical bar chart in D3 with two "levels" of data and I want to display a legend with two distinct items.

When a user clicks on a bar chart value X to go down to the next level, I want the value of X (ie a string) to appear in a legend on that new chart. That way, a user always knows what value/category they just clicked on.

The second part of the legend is that I want the aggregate count of all the values on a chart to show somewhere. So if I have a chart with values of 10,15,25 I want to be able to display 50 within a legend on the chart.

Answer 1

I'll asumme your are working with this: http://bl.ocks.org/mbostock/1283663

first add text:

  var parent = svg.append("text").attr("x",-margin.left).attr("y",0)

On down function update the text:

  parent.text("Position:"+d.name+" Value:"+d.value)

and up function:

  parent.text("Position:"+d.parent.name+" Value:"+d.parent.value)

Here the working code

If you don't want to show the root:

down function:

  if (d.name == "flare") {
    parent.text("")
  } else {
  parent.text("Position:"+d.name+" Value:"+d.value)  
  }

up function:

  if (d.parent.name == "flare") {
    parent.text("")
  } else {
  parent.text("Position:"+d.name+" Value:"+d.parent.value)  
  }

To show value after each name bars, tweak function bar(d):

  bar.append("text")
      .attr("x", -6)
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d.name+" : "+d.value; }); // <-- Here made mods