20

我想创建一个条形图，使用字符串作为 x 轴上刻度的标签（例如，第 1 年、第 2 年等而不是 0、1、2 等）。

我首先使用 x 轴的数值（例如，0、1、2、3 等），如下所示：

1）我生成我的范围：

     x = d3.scale.ordinal()
        .domain(d3.range(svg.chartData[0].length)) //number of columns is a spreadsheet-like system
        .rangeRoundBands([0,width], .1); 


     y = d3.scale.linear()
        .domain(Math.min(d3.min(svg.chartData.extent),0), Math.max(d3.min(svg.chartData.extent),0)]) 
        .range([height, 0])
        .nice();

2）制作轴：

     d3.svg.axis()
        .scale(x);

3）重绘轴：

     svg.select(".axis.x_axis")
        .call(make_x_axis().orient("bottom").tickSubdivide(1).tickSize(6, 3, 0));

这适用于默认的数字轴标签。

如果我尝试对这样的 x tickValues 使用字符串数组......

     d3.svg.axis()
        .scale(x).tickValues(svg.pointsNames); //svg.pointsNames = ["Year 1", "year 2", etc.]

...当我重绘图表（对数据/设置进行更改或不更改）时，标签会像这样交换。

在此处输入图像描述 在此处输入图像描述

请注意 Col 1 如何取代 Col 0，反之亦然。

你知道为什么会这样吗？

4

2 回答 2

22

更新

只需svg.pointsNames在将它们应用为 tickValues 之前对它们进行排序。确保以与对数据进行排序完全相同的方式对它们进行排序。这样，您的标签和刻度值之间始终保持一对一的映射。

另外，如果可以，请在此处查看tickFormat` 函数。这对我来说似乎是一个更好的选择。

//Tick format example
chart,xAxis.tickFormat(function(d, i){
    return "Year" + d //"Year1 Year2, etc depending on the tick value - 0,1,2,3,4"
})
于 2012-08-02T06:50:37.747 回答
0

谢谢你...我用这个函数和一个内联的 if 子句来处理一个不同的 x 轴系列，用名称而不是数字。

派系数组由所有相关名称组成，这些名称按系列索引排序，然后与数据中的相应索引匹配。

xAxis = d3.svg.axis().scale(xScale)
            .tickFormat(function(d) { 

                if(seriesX == 'seriesValue'){ 
                    return factions[d]}

                else{ 
                    return d}
            })    
         .orient("bottom");
于 2014-08-18T11:12:01.050 回答