Question

我在图中有两条线，如图中有不同的X轴点。我只是想比较一下。所以我需要将第二行放在第一行（将图表标准化为第二张图片）

我尝试使用nvd3域和范围选项以及其他一些选项。但它不起作用。你能告诉我如何获得那些标准化的图表。就线条可比而言，我不担心Tick格式。

图片1（我所拥有的图表）
https://www.dropbox.com/s/sycwppnlachju2s/Screenshot%20from%202014-06-19%2014%3A21%3A40.png

图2（图表我需要）
https://www.dropbox.com/s/eoajf0yyk96w6y7/Screenshot%20from%202014-06-19%2014%3A20%3A21.png

nv.addGraph(function() {
  var chart = nv.models.lineWithFocusChart();

  chart.xAxis
    .tickFormat(d3.format(',f'));

  chart.yAxis
    .tickFormat(d3.format(',.2f'));

  chart.y2Axis
    .tickFormat(d3.format(',.2f'));



  d3.select('#chart svg')
    .datum(data)
    .transition().duration(500)
    .call(chart)
    ;


  nv.utils.windowResize(chart.update);

  return chart;
});

这是我的数据文件。 data.json

[{"key":"Memory_FREEmyses1","values":[{"x":"1395426430","y":"200028"},
{"x":"1395426431","y":"199904"},{"x":"1395426432","y":"187620"},
{"x":"1395426434","y":"187504"},{"x":"1395426435","y":"187380"},
{"x":"1395426436","y":"187008"},{"x":"1395426437","y":"186760"},
{"x":"1395426438","y":"186512"},{"x":"1395426439","y":"186388"},
{"x":"1395426440","y":"186264"},{"x":"1395426441","y":"181804"},
{"x":"1395426443","y":"181084"},{"x":"1395426444","y":"181084"}]},
{"key":"Memory_FREEmyses2","values":[{"x":"1395426455","y":"178604"},
{"x":"1395426456","y":"178348"},{"x":"1395426457","y":"178356"},
{"x":"1395426458","y":"178232"},{"x":"1395426460","y":"178108"},
{"x":"1395426461","y":"177860"},{"x":"1395426462","y":"177480"},
{"x":"1395426463","y":"176992"},{"x":"1395426464","y":"176868"},
{"x":"1395426465","y":"176620"},{"x":"1395426466","y":"176612"},
{"x":"1395426467","y":"176620"}]}]

Answer 1

尝试映射您的数据，如：

data = data.map(function(series) { 
    var d0 = series.values[0].x;
    var dN = series.values[series.values.length -1].x;             
    series.values = series.values.map(function(d) {                     
        return { 
            x: 10*(d.x-d0)/(dN-d0), 
            y: d.y 
        }
    });
    return series;
})

请参阅demo。

使用焦点图标准化NVD3 Line中的Graph轴

1 个答案: