NVD3 - xAxis 标签的定位不起作用答案

【问题标题】：NVD3 - Positioning of xAxis labels not workingNVD3 - xAxis 标签的定位不起作用
【发布时间】：2014-07-04 18:55:36
【问题描述】：

总的来说，我是 NVD3 和 D3 的新手。我已经设置了一个图表并使用一个数组来传递 xAxis 上标签的字符串。不幸的是，它们没有正确定位。

jsfiddle：http://jsfiddle.net/darcyvoutt/daw7s/

全屏（更容易查看问题）：http://jsfiddle.net/darcyvoutt/daw7s/embedded/result/

代码如下：

nv.addGraph(function() {
  var chart = nv.models.multiBarChart()    
    .color(["#24545F", "#428696", "#6DADBD", "#58CBE7"])
    .transitionDuration(10)
    .showControls(false)
    .groupSpacing(0.55) 
    .showLegend(true)    
    .stacked(true)    
    .delay(350)
    ;

  var tickMarks = ["YourPhone","Universe X3", "ePhone 74s", "NextUs", "Humanoid"];

  chart.xAxis      
      .tickValues(tickMarks)
      .axisLabel("Products")
      ;

  chart.yAxis
      .tickFormat(d3.format(',1f'))
      ;

  d3.select('#salesChart svg')
      .datum(exampleData())
      .call(chart)
      ;

  nv.utils.windowResize(chart.update);

  return chart;
});

为了强调，变量和传递如下：

  var tickMarks = ["YourPhone","Universe X3", "ePhone 74s", "NextUs", "Humanoid"];

  chart.xAxis      
      .tickValues(tickMarks)
      ;

【问题讨论】：

标签： d3.js nvd3.js

【解决方案1】：

不是一个完美的解决方案，但这可能有助于 http://jsfiddle.net/daw7s/3/ 使用 tickFormat

  chart.xAxis
  .tickFormat(function(d){
        return tickMarks[d];
   })
  .axisLabel("Products")
  ;

【讨论】：

感谢您的回复，这肯定也有效，尽管在我最终意识到我可以简单地更改数据中的值之后，这在我看来是一个更清洁的解决方案，因为我可以构建一个数组从数据库中提取。
是的，我后来看到了你的帖子。很高兴你找到了解决方案:)
我想我们是同时发帖的。我真的很感激，这在标签是静态的情况下仍然可以派上用场。
+1 用于解决方案。 @dvoutt 不要忘记接受你的回答。
谢谢，要等到明天才不会让我呢。大声笑

【解决方案2】：

最终解决了问题，我根本不需要.tickValues，如果我只是在数据中更改了我的x 值，那么它就可以正常工作，这是数据结构。

function exampleData() {
  return [
    {
      "key": "Basic Planners",
      "values": [{"x": "YourPhone","y": 150}, 
                 {"x": "Universe X3","y": 300},
                 {"x": "ePhone 74s","y": 1500}, 
                 {"x": "NextUs","y": 50}, 
                 {"x": "Humanoid","y": 500
                }]
    }, {
      "key": "No-Namers",
      "values": [{"x": "YourPhone","y": 300}, 
                 {"x": "Universe X3","y": 250}, 
                 {"x": "ePhone 74s","y": 400}, 
                 {"x": "NextUs","y": 150}, 
                 {"x": "Humanoid","y": 900}]

    }, {
      "key": "Feature Followers",
      "values": [{"x": "YourPhone","y": 350}, 
                 {"x": "Universe X3","y": 900}, 
                 {"x": "ePhone 74s","y": 100}, 
                 {"x": "NextUs","y": 500}, 
                 {"x": "Humanoid","y": 250}]

    }, {
      "key": "Hipsters & Elites",
      "values": [{"x": "YourPhone","y": 200}, 
                 {"x": "Universe X3","y": 350}, 
                 {"x": "ePhone 74s","y": 50}, 
                 {"x": "NextUs","y": 800}, 
                 {"x": "Humanoid","y": 100}]

    }
  ]
}

以前看起来更像：

"values": [{"x": 0","y": 150}, 
                 {"x": 1,"y": 300},
                 {"x": 2,"y": 1500}, 
                 {"x": 3,"y": 50}, 
                 {"x": 4,"y": 500
                }]

【讨论】：