Question

我是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)
      ;

Answer 1

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

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

Answer 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
                }]

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

2 个答案: