Question

我正在尝试将x轴标签指定为字符串。我可以让字符串出现，但我不能让它们正确展开/对齐。所有数字都正确显示，我似乎无法正确展开标签或显示域名。我真的希望让标签工作，但域似乎可能是另一种方式。

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;
  });

数据

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}
    ]
}
];

Answer 1

d3比例或轴的“域”是输入数据。您的数据集中哪个看起来像数字，而不是一周的名称。见http://alignedleft.com/tutorials/d3/scales

您希望使用xAxis.domain([0,1,2,3,4,5]);。

那么你如何获得标签与你的数字？我没有仔细考虑它，我建议使用比例的“范围”（输出）部分。但是，轴的范围定义了图表上类别的数字间距，而不是标签。

您想要的是一种自定义格式化功能，可将数据中的数字转换为标签。您可以使用“tickFormat”选项设置它：

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

    return labels[index];

    });

通常情况下，刻度格式化函数用于将数字格式化为小数或百分数，但语法允许您使用任何将数据值作为参数的函数（我在此将其命名为index）并返回要显示的字符串。行return labels[index];在labels数组中找到索引编号的元素，其中第一个标签是索引0。

如果数据值不是以零开头的连续整数，则可以使用带有命名元素的对象/关联数组格式，而不仅仅是数组。例如，如果您的数据具有值“M”，“T”，“W”，“R”等，并且您希望它显示全天名称，您将使用：

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

    return labels[name];

    });

传递给tickValues()的值必须是输入域中的值，*，即格式与JSON数据中的值相同。此外，一旦明确设置了tickValues，请不要通过设置多个刻度来覆盖该设置。但是如果你只想要一些日子来标记（例如，如果图表上没有足够的空间用于所有名称），你应该只需要tickValues。

*注意更正。

无法让nvd3 x值标签显示正确

1 个答案: