How to add a legend to a discrete bar graph in nvd3?

问题

I am currently trying to use nvd3 to build a bar graph, and so far the discrete bar graph has everything I need. However, I am struggling with trying to add a legend to it like the other graphs have. I've already made the similiar changes to add a legend inside of the discreteBarGraph.js file, but it's apparent i'm missing something. Does anyone have any experience with this? Thanks.

回答1:

The discrete bar chart may not have a legend built in, but the NVD3 default legend is itself a built-in function that you can call just like the NVD3 chart functions.

The only complicated part is setting the data you want to show in the legend. In the other graphs, the legend shows the series name; but for the discrete bar chart there is only one series. I'm assuming you want to show the labels associated with each bar, possibly as an alternative to showing them on the x-axis.

To make that happen, you have to make sure that the data array associated with the selection that calls the legend function is the array of bar values and names, not the top-most array of data series (which in the discrete bar chart is a length-one array containing the single series object.) You then tell the legend function how to access the appropriate label from each bar's data object using the key(function(d){}) method.

Here's an adaptation of the NVD3 discrete bar example with those changes:

nv.addGraph(function() {
  var chart = nv.models.discreteBarChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .tooltips(false)
      .showValues(true)
      .margin({top:50})//leave room for legend

  chart.xAxis.tickFormat("") //don't show bar labels on axis
        .axisLabel("Sector"); //show an axis title instead

  //store svg selection in a variable so it can be re-used:
  var svg = d3.select('#chart svg')
      .datum(data); 

  //make the chart:
  svg.transition().duration(500)
      .call(chart);

  var makeLegend = nv.models.legend()
            //initialize legend function

        .key(function(d) { return d.label; });
            //tell the function which property to use as text

  svg.append("g").attr("class", "legend")
    //add a group to hold legend, position as necessary
    //(no positioning will draw legend across top of SVG)

    .datum(data[0].values) 
    //set data to the array of objects you want 
    //included in the legend

    .transition().duration(500)
        .call(makeLegend); //make it so

  nv.utils.windowResize(chart.update);

  nv.utils.windowResize(makeLegend); //doesn't seem to make much difference, but...

  return chart;
});

If you are updating your data in any way that affects the legend, remember you'll need to update the legend as well as the main chart.

来源：https://stackoverflow.com/questions/21272606/how-to-add-a-legend-to-a-discrete-bar-graph-in-nvd3