Can't get nvd3 x value labels to display right

问题

I'm trying to specify the x axis labels as strings. I can get the strings to show up, but I can't get them to spread out/align properly. All of the numbers are displaying correctly, I just can't seem to get the labels to spread out correctly or the domain to show up. I'm really looking to get the labels working, but the domain seemed like it could be an alternate way possibly.

nv.addGraph(function() {
  var chart = nv.models.lineChart();
  var fitScreen = false;
  var width = 600;
  var height = 300;
  var zoom = 1;

  chart.useInteractiveGuideline(true);
  chart.xAxis
   .domain(["Sunday","Monday","Tuesday","Wednesday","Thursday"])
   .tickValues(['Label 1','Label 2','Label 3','Label 4','Label 5'])
   .ticks(5);
   //.tickFormat(d3.format('d'));

  chart.yAxis
   .tickFormat(d3.format(',.2f'));

  d3.select('#chart1 svg')
  .attr('perserveAspectRatio', 'xMinYMid')
  .attr('width', width)
  .attr('height', height)
  .datum(veggies);

  setChartViewBox();
  resizeChart();

  return chart;
  });

Data

veggies = [ 
{
key: "Peas",
values: [
        {x: 0, y: 2},
                    {x: 1, y: 5},
                    {x: 2, y: 4}
    ]
},
{
key: "Carrots",
values: [
        {x: 0, y: 2},
                    {x: 1, y: 5},
                    {x: 2, y: 4}
    ]
}
];

回答1:

The "domain" of a d3 scale or axis is the input data. Which in your data set look like numbers, not names of the week. See http://alignedleft.com/tutorials/d3/scales

You want to something like xAxis.domain([0,1,2,3,4,5]);.

So how do you get labels to go with your numbers? Without thinking about it to closely, I suggested using the "range" (output) part of the scale. But range for the axis defines the numerical spacing for the categories on your graph, not the labels.

What you want is a custom formatting function that converts the numbers from the data into labels. You set that with the "tickFormat" option:

xAxis.tickFormat( function(index) {
    var labels = ["Label0", "Label1", "Label2", "Label3", "Label4", "Label5"];

    return labels[index];

    });

Normally, tick formatting functions are used to format numbers into decimals or percents, but the syntax allows you to use any function that takes the data value as a parameter (I've named it index here) and returns the string that you want to be displayed. The line return labels[index]; finds the index-numbered element in the labels array, where the first label is index 0.

If your data values aren't consecutive integers starting with zero, you can use the object/associative array format, with named elements, instead of just an array. For example, if your data had the values "M", "T", "W", "R", etc., and you wanted it to display full day names, you would use:

xAxis.tickFormat(function(name) {
    var labels = {"M":"Monday", "T":"Tuesday", "W":"Wednesday", 
                   "R": "Thursday", "F":"Friday"};

    return labels[name];

    });

The values you pass to tickValues() have to be values in the input domain,* i.e, in the same format as the values in the JSON data. Also, once you set tickValues explicitly, don't over-ride that setting by setting a number of ticks. But you should only need tickValues if you only want some of the days to have labels (for example, if there is not enough space on the chart for all the names).

*Note correction.

来源：https://stackoverflow.com/questions/21127118/cant-get-nvd3-x-value-labels-to-display-right

标签

d3.js

linechart