D3 - 使用字符串轴蜱

欲箱使用字符串作为标签上的x轴的刻度的条形图（例如，1年，2年，等代替0,1,2，等等）。D3 - 使用字符串轴蜱

我开始使用数字值的x轴（例如，0,1,2,3等），如下所示：

1）I生成我范围：

 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.]

...当我重绘图表（有或没有更改数据/设置），标签交换像这样。

enter image description here

通知西1如何发生山口0的地方，并且反之亦然。

你知道为什么会这样？

来源

2012-08-02 Gian

更新

应用它们作为tickValues之前只是排序的svg.pointsNames。确保您按照您对数据进行排序的方式对它们进行排序。这样，您的标签和刻度值之间始终保持一对一映射。

另外，如果我可以在这里检查出tickFormat` function。这对我来说似乎是一个更好的选择。

//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-02 06:50:37

由于即彼，因为它们是用数字数据产生一起pointsNames排序：当我填充一个柱以图表，我的名字阵列中推名称。我还在控制台中检查了pointsNames始终处于正确的顺序。奇怪的是，第一次图表初始化时就开始了，然后交换并保持交换。所以它只在第一次重绘时交换。感谢您的链接：我应该如何在我的情况下使用axis.tickFormat（[格式]）？再次感谢。 – Gian 2012-08-02 07:06:53

我同意@Jibi，tickFormat函数是解决问题的一种更简洁的方法。 – 2012-08-02 15:31:05

@Pablo，你能告诉我如何在我的情况下使用它axis.tickFormat（[格式]）？我怎么能形成从另一个数组来的字符串[0，1，2等]？ – Gian 2012-08-04 06:18:06

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

各派阵列包括由一系列谁再先手与数据与其对应的索引匹配的索引排序的所有相关名称。

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

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

       else{ 
        return d} 
      })  
     .orient("bottom");

来源

2014-08-18 11:12:01 stinglsa

D3 - 使用字符串轴蜱

回答

相关问题