Javascript NVD3：与数据相比，在X轴上显示不同的值

我正在使用NVD3创建一个分散的图形，使用他们在有限的文档中提供的代码。我创建了一个散点图函数，它在JSON上循环并将值推送到数据数组。 现在我的Json中有两个x轴的值，x和runnumber。我想要的是，应该为值“x”（具有相等间距）绘制图形，但它应该在x轴上显示运行编号的值（具有不相等间距）。我们希望这样做可以使图形更加对称，因为准确显示图形中的间隙对我们来说并不重要。 我所做的是创建一个新数组xAxisValue，并在循环JSON以获取值的同时将运行编号推送到它上面。x的值被推送到数据数组中， 然后使用

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

我将Tick值设置为xAxisValue（运行编号），然后将数据变量传递给draw chart函数

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

但这似乎不起作用。“我的轴”为空，将鼠标悬停在某个值上时，工具提示将显示x的值，而不是运行编号。 因为我们正在动态更新图，所以我将addgraph和upgraph函数分开 这是密码

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;

}

函数addGraph（）{
var-jsons=[]；
chart=nv.models.scatterChart（）.showDistX（真）。showDistY（真）
转换时间（350）。颜色（d3。比例。类别10（）。范围（）；
图表.工具提示内容（函数（键）{
返回“”+键+“”；
});
图表。散点。仅圆形（假）；
var myData=散乱数据（2,11,jsons）；
d3.选择（“#chart svg”）.datum（myData.call（chart）；
//添加缩放处理程序
nv.utils.windowResize（图表更新）；
收益表；
}

升级图函数

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;
}

函数升级图（）{
minValue=1000000，maxValue=0，minValueY=100000000，maxValueY=0；
var-jsons=[]；
d3.选择（“svg”）。文本（“”）；
如果（$（“#check2”）。是（'：checked'））{
push（“charge_ONTk_Barrel_L2_mpv.json”）；
}
如果（$（“#check1”）。是（'：checked'））{
推（charge_ONTk_Barrel_L1_mpv.json）；
}
如果（$（“#check3”）。是（'：checked'））{
推（charge_ONTk_Barrel_L3_mpv.json）；
}
var myData=散乱数据（2,11,jsons）；
chart.xAxis.axisLabel（'Run No.）.tickFormat（d3.format（'0d'））.tickValue(
xAxis值）；
chart.yAxis.axisLabel（'S/N（mpv）'））.tickFormat（d3.format（'.04f'））；
对于（var i=0；i

以及散射数据函数

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;

}

函数散点数据（组、点、JSON）{
var数据=[]；
数据推送({
键：“错误”，
值：[]，
颜色：“#FBEC5D”
});
数据推送({
关键字：'Bin Content'，
值：[]，
颜色：“#0D4F8B”
});
对于（var i=0；i最大值）{
maxValue=value[i].x；
}
if（值[i]。运行<最小值）{
minValue=value[i].x；
}
if（值[i].y>maxValueY）{
maxValueY=值[i].y；
}
if（值[i].y

这是我得到的输出

---

如果我正确理解了你的问题：

对于x轴刻度，我将使用。您可以创建一个函数

mapXToRunNumber（x）

，该函数接受一个x值并返回一个运行编号（您似乎已经接近这个值了）。然后，您将使用：

chart.xAxis.tickFormat（mapXtoRunNumber）

要使工具提示也显示与x轴相同的值，可以使用
chart.interactiveLayer.tooltip.headerFormatter（mapXToRunNumber）
函数mapXToRunNumber应该将单个值x作为参数并返回其运行编号，还是只传递整个数组并返回整个数组第一个数组。它应该取一个x值并返回相应的运行编号。tickFormat和HeadPerformatter函数已经在所有数据中循环，但它们需要传递一个函数来知道如何处理每个点。这是否回答了您的问题？