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