0

我希望轴读取“1x”、“2x”、3x”。在其他图形类型中，它正确地从值中获取 x 值，但这似乎不同。我知道我是否注释掉

.x(function(d,i) { return i });

图表的显示不再正常工作。我可以添加

chart.xAxis.tickFormat(function(d) { return d3.format(',f')(d+1)+"x" });

但是，如果 x 轴是其他字符串，那将是一种作弊。

代码：https ://github.com/tvinci/webs/blob/gh-pages/lineplusbar.html

示例：http ://tvinci.github.io/webs/lineplusbar.html

页面代码：

  nv.addGraph(function() {
     //var testdata = exampleData();
     var chart = nv.models.linePlusBarChart()
           .margin({top: 30, right: 60, bottom: 50, left: 70})
           //if this is commented out, the graph does not display properly
           .x(function(d,i) { return i });
     //this is the cheat I use to show the correct X axis
     //chart.xAxis.tickFormat(function(d) { return d3.format(',f')(d+1)+"x" });
     chart.y1Axis.tickFormat(d3.format(',f'));
     chart.y2Axis.tickFormat(d3.format(',f'));

     //forces the chart to start at 0
     // if you set this to [0,100] and your data's domain is -10 to 110, the domain will be [-10,110]
     chart.lines.forceY([0]);

     d3.select('#chart svg').datum(eval("overview_data")).transition().duration(500).call(chart);
      d3.selectAll("rect.nv-bar").style("fill", function(d, i){return i > 50 ? "red":"blue";});
     nv.utils.windowResize(chart.update);

数据：

var overview_data=[
     { "key" : "Achieved" , "bar": true,"values" : [ [ "1x" , 30] , [ "2x" , 70] , [ "3x" , 200] ]} ,
     { "key" : "Required" , "values" : [ [ "1x" , 50] , [ "2x" , 100] , [ "3x" , 150] ]}
    ].map(function(series) {series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });return series;});

});

4

2 回答 2

0

我看到的唯一技巧是在不需要时不要使用 d3.format() 。只需这样做：

 chart.xAxis.tickFormat(function(d) { return (d+1)+"x" });

jsFiddle：http: //jsfiddle.net/chrisJamesC/RqvJR/

于 2013-04-12T07:31:50.483 回答
0

@chris - 那是我的作弊。:) 如果 x 值更改为“星期一”之类的内容，它将不起作用。

我能够弄清楚我可以将索引提供给我的数据对象以提取正确的值。

chart.xAxis.tickFormat(function(d) {return overview_data[0].values[d].x; });
于 2013-04-13T00:30:03.803 回答