无法获取nvd3 x值标签以正确显示 [英] Can't get nvd3 x value labels to display right
问题描述
我正在尝试将x轴标签指定为字符串.我可以使字符串显示出来，但不能使它们散布/正确对齐.所有数字都正确显示，我似乎无法正确显示标签或显示域.我确实正在寻找使标签起作用的方法，但该域似乎可能是一种替代方法.
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;
});
数据
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}
]
}
];
推荐答案
d3比例尺或轴的域"是输入数据.数据集中的哪个看起来像数字，而不是星期名称.参见 http://alignedleft.com/tutorials/d3/scales
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
您想要类似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.
您想要的是一个自定义格式设置功能，该功能可以将数据中的数字转换为标签.您可以使用"tickFormat"选项进行设置:
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];
});
通常，刻度格式函数用于将数字格式化为小数或百分数，但是语法允许您使用将数据值作为参数的任何函数(我在这里将其命名为index)并返回字符串您想要显示的内容. return labels[index];行在标签数组中找到索引编号的元素，其中第一个标签为索引0.
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.
如果数据值不是以零开头的连续整数，则可以使用带有命名元素的对象/关联数组格式，而不仅仅是数组.例如，如果您的数据具有值"M"，"T"，"W"，"R"等，并且您希望它显示全天名称，则可以使用:
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];
});
您传递给tickValues()的值必须是输入域中的值*，即，格式与JSON数据中的值相同.同样，一旦您明确设置了tickValues，就不要通过设置多个刻度来覆盖该设置.但是，如果只希望某些日子中有标签(例如，如果图表上没有足够的空间容纳所有名称)，则只需要tickValues.
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).
*注意更正.
这篇关于无法获取nvd3 x值标签以正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
