NVD3 - xAxis標籤的定位不起作用

我是NVD3和D3的新手。我已經設置了一個圖並使用一個數組爲xAxis上的標籤傳遞字符串。不幸的是，他們沒有正確定位。NVD3 - 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) 
     ;

來源

2014-07-04 dvoutt

最終找出問題，我根本不需要.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 
       }]

來源

2014-07-04 10:52:49 dvoutt

不是一個完美的解決方案，但是這可以通過使用tickFormat

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

來源

2014-07-04 10:55:36 fasouto

感謝您的答覆，那肯定作品，以及幫助http://jsfiddle.net/daw7s/3/，雖歷經我最終意識到我可以簡單地改變數據中的值，這在我看來是一個更清晰的解決方案，因爲我可以構建一個從數據庫中拉出的單個數組。 – dvoutt

是的，我以後看到你的帖子。很高興你找到解決方案:) – fasouto

我認爲我們在同一時間發佈。我很欣賞它，這可能仍然適用於標籤是靜態的情況。 – dvoutt

NVD3 - xAxis標籤的定位不起作用

回答

相關問題