javascript - NVD3 : Display different values on X axis as compared to the data

Question

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

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;

}

这是我得到的输出

Answer 1

如果我正确理解你的问题:

对于 x 轴刻度，我将使用 D3's axis.tickformat function 。您可以创建一个函数 mapXToRunNumber(x) ，它接受 x 值并返回一个运行编号(您似乎已经接近拥有它了)。然后，您将使用: chart.xAxis.tickFormat(mapXtoRunNumber);

为了使工具提示也显示与 x 轴相同的值，您可以使用 nvD3 function chart.interactiveLayer.tooltip.headerFormatter(mapXToRunNumber)。