NVD3：相比於數據

我創建使用NVD3使用他們自己的有限文檔中提供的代碼的散射圖形在X軸上顯示不同的值。我創建了一個散佈圖函數，它遍歷JSON並將值推送到數據數組。現在我在我的Json x中有2個x軸值，並運行Number。我想是該圖形應被繪製的「x」值（其具有相等的間隙），但它應顯示在x軸上（其具有不相等的間隙）執行命令數的值。我們希望這樣做使圖形更加對稱，因爲對於我們精確地顯示圖形中的空白並不重要。我所做的就是創建一個新的Array xAxisValue，推動運行到數它，而我們的循環JSON獲得價值。對於x的值被壓入數據陣列，然後，使用NVD3：相比於數據

chart.xAxis.axisLabel('Run No.').tickFormat(d3.format('0d')).tickValues(
     xAxisValue);

我設置蜱值到xAxisValue（運行號碼），然後將數據變量傳遞到繪製圖表函數

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

但這似乎並不奏效。我的軸是空白的並且懸停在一個值上顯示工具提示顯示x的值而不是運行數。因爲我們是動態更新的圖我已經分開添加圖形和升級的圖形功能這裏是代碼

function addGraph() { 

var jsons = []; 


chart = nv.models.scatterChart().showDistX(true).showDistY(true) 
     .transitionDuration(350).color(d3.scale.category10().range()); 


chart.tooltipContent(function(key) { 
    return '<h3>' + key + '</h3>'; 
}); 


chart.scatter.onlyCircles(false); 



var myData = scatterData(2, 11, jsons); 


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

// add zoom handler 

nv.utils.windowResize(chart.update); 

return chart; 

}

升級的圖形功能

function upgradeGraph() { 
minValue = 1000000, maxValue = 0, minValueY = 100000000, maxValueY = 0; 
var jsons = []; 
d3.select('svg').text(''); 
if ($("#check2").is(':checked')) { 
    jsons.push("charge_ONTk_Barrel_L2_mpv.json"); 
} 
if ($("#check1").is(':checked')) { 
    jsons.push("charge_ONTk_Barrel_L1_mpv.json"); 
} 
if ($("#check3").is(':checked')) { 
    jsons.push("charge_ONTk_Barrel_L3_mpv.json"); 
} 

var myData = scatterData(2, 11, jsons); 
chart.xAxis.axisLabel('Run No.').tickFormat(d3.format('0d')).tickValues(
     xAxisValue); 
chart.yAxis.axisLabel('S/N (mpv)').tickFormat(d3.format('.04f')); 

for (var i = 0; i < xAxisValue.length; i++) { 
    console.log("Run Number: " + xAxisValue[i]); 
} 
console.log("Min Y: " + minValueY + " Max Y " + maxValueY); 
chart.forceX([ minValue - 2, maxValue + 2 ]); 
chart.forceY([ minValueY - 3, maxValueY + 3 ]); 


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

// add zoom 
addZoom({ 
    xAxis : chart.xAxis, 
    yAxis : chart.yAxis, 
    yDomain : chart.yDomain, 
    xDomain : chart.xDomain, 
    redraw : function() { 
     chart.update(); 
    }, 
    svg : chart.svg 
}); 

nv.utils.windowResize(chart.update); 
return chart; 
}

而且ScatterData功能

function scatterData(groups, points, jsons) { 

var data = []; 
data.push({ 
    key : 'Error', 
    values : [], 
    color : '#FBEC5D' 
}); 
data.push({ 
    key : 'Bin Content ', 
    values : [], 
    color : '#0D4F8B' 
}); 
for (var i = 0; i < jsons.length; i++) { 
    xAxisValue = []; 
    var jsonURL = jsons[i]; 
    var xmlhttp = new XMLHttpRequest(); 
    var url = "alljsons/" + jsons[i]; 

    var parameters = location.search; 

    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      var myArr = JSON.parse(xmlhttp.responseText); 

      var jsonName = jsonURL.split("."); 
      var temp = jsonName[0]; 

      var value = myArr[temp]; 

      // $(".title" + loop).html(temp); 

      for (var i in value) { 

       if (value[i].run > maxValue) { 
        maxValue = value[i].x; 
       } 
       if (value[i].run < minValue) { 
        minValue = value[i].x; 
       } 
       if (value[i].y > maxValueY) { 
        maxValueY = value[i].y; 
       } 
       if (value[i].y < minValueY) { 
        minValueY = value[i].y; 
       } 
       xAxisValue.push(value[i].run); 
       data[1].values.push({ 
        x : value[i].x, 
        y : value[i].y, 
        size : 6 // Configure the size of each scatter point 
        , 
        shape : "circle" 

       }); 
       var err = value[i].y - value[i].yErr; 
       if (err < 0) { 
        err = 0; 
        console.log("error: " + err); 
       } 
       data[0].values.push({ 
        x : value[i].x, 
        y : err, 
        size : 6 // Configure the size of each scatter point 
        , 
        shape : "triangle-down" 
       }); 
      } 
     } 

    }; 

    xmlhttp.open("GET", url, false); 
    xmlhttp.send(); 
} 

return data; 

}

這裏是我得到

輸出

Outputs