NVD3.js在时间序列中突出显示时间戳

Question

我想突出显示使用nvd3.js eventLineChart建模的时间序列中的某些点 - 更确切地说，我有一个带有时间戳和每个时间戳的json对象喜欢在此特定日期/时间添加垂直线。突出显示的点可能不存在于时间序列数据源中，并且在所有时间序列数据组（如蜱）中都是全局的。

关于如何实现这一点的任何想法？ - 我尝试在我的情节中添加一条标准线（根据我想要突出显示的事件的时间戳固定y1和y2和x），但无法将时间戳缩放到与原始时间序列相同的范围。

下面是我开始为此目的建立的模型的一些部分，其基于nv.models.lineChart。 - （只是一个模型，因为大多数代码的摘录距离线型图模型副本）：

nv.models.eventLineChart = function() { 
// adds vertical highlights to line chart 
"use strict"; 

var chartEvents = {} 

function chart(selection) { 
    selection.each(function(data) { 

     // Setup Scales 
     x = lines.xScale(); 
     y = lines.yScale(); 

     // Setup containers and skeleton of chart 
     var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-lineChart').append('g'); 
     var g = wrap.select('g'); 
     gEnter.append('g').attr('class', 'nv-eventLinesWrap'); 
     //------------------------------------------------------------ 
     // Main Chart Component(s) 
     var eventWrap = wrap 
          .select('.nv-eventLinesWrap') 
          .selectAll('.nv-eventLines') 
          .data(function(d) {return d }); 

     eventWrap 
      .enter() 
      .append('g') 
      .attr('class', 'nv-eventLines'); 

     // chartEvents json ==> [{decsription: "test,"timestamp: 1375031820000}] 
     var eventLine = eventWrap 
          .selectAll('.nv-eventLine') 
          .data(chartEvents, function(d){return (d.timestamp)}); 

     var eventLineEnter = eventLine.enter() 
      .append('line').attr('class', 'nv-eventLine') 
      .style('stroke-opacity', 0); 

     // @todo set ymin and ymax 
     eventLine 
      .attr('x1', function(d){ return x(d.timestamp);}) 
      .attr('x2', function(d){ return x(d.timestamp);}) 
      .attr('y1', 300) 
      .attr('y2', 800) 
      .style('stroke', function(d,i,j) { return color(d,j) }) 
      .style('stroke-opacity', function(d,i) { 
       return 1; 
      }); 
    }); 
    return chart; 
} 

chart.setChartEvents = function(_) { 
    if (!arguments.length) return chartEvents; 
    chartEvents = _; 
    return chart; 
};  
return chart;} 

这种模式被称为使用：

nv.addGraph(function() { 
var nv3dChart = nv.models.eventLineChart().useInteractiveGuideline(true).setChartEvents(json.chartEvents); 
// json.chartEvents >> [{decsription: "EventDescription,"timestamp: 1375031820000}] 

nv3dChart.xAxis 
    .showMaxMin(false); 
    .tickFormat(function(d) { return d3.time.format("%Y-%m-%d")(new Date(d)) }); 

nv3dChart.yAxis 
    .axisLabel(widgetConfig.action.data.kpiName) 
    .tickFormat(d3.format(',.f')); 

var ndg = d3.select(renderToElementId+' svg'); 
ndg.datum([{ 
     values: json.data, 
     key: widgetConfig.action.data.tagName 
    }])  
.transition().duration(500); 

nv.utils.windowResize(nv3dChart.update); 

return nv3dChart;}) 

目前将会产生这个SVG输出（应该仅由垂直线被显示的事件）

<g class="nv-eventLines"> 
    <line class="nv-eventLine" x1="1375031820000" x2="1375031820000" y1="300" y2="800" style="stroke: #1f77b4;"></line> 
</g> 

..如所描述的，我还没有想出根据林的规模的方式来实现的事件x值的缩放比例E视力表

将不胜感激关于这个问题

Answer 1

我现在手动创建x和y的所有尺度，并将它们添加到nvd3元素的任何帮助。我对该解决方案并不特别满意，因为它阻止我为多个nvd3图表创建更多模块化功能，但这是一个起点。

这是我目前的解决方案的概要：

nv.models.eventLineChart = function() { 
// initialize scales 
var y = d3.scale.linear(), 
    x = d3.scale.linear(); 

// set scales of lines 
lines = nv.models.line() 
     .yScale(y)  


function chart(selection) { 
    //@todo support for multiple series 

    // set domain and range for scales 
    x 
    .domain(d3.extent(data[0].values, function(d){return d.x})) 
    .range([0,availableWidth]); 

    y 
    .domain(d3.extent(data[0].values, function(d){return d.y})) 
    .range([0,availableHeight]); 

    // add container for vertical lines 
    gEnter.append('g').attr('class', 'nv-eventLinesWrap'); 

    // setup container 
    var eventWrap = wrap.select('.nv-eventLinesWrap').selectAll('.nv-eventLines') 
     .data(function(d) {return d }); 

    eventWrap.enter().append('g').attr('class', 'nv-eventLines'); 
    eventWrap.select('.nv-eventLinesWrap').attr('transform', 'translate(0,' + (-margin.top) +')'); 

    var eventLine = eventWrap.selectAll('.nv-eventLine').data(chartEvents, function(d){return (d.timestamp)}); 
    var eventLineEnter = eventLine.enter() 
     .append('line').attr('class', 'nv-eventLine') 

    // configure and style vertical lines 
    //@todo: set color for lines 
    eventLine 
     .attr('x1', function(d){ return x(d.timestamp)}) 
     .attr('x2', function(d){ return x(d.timestamp)}) 
     .attr('y1', y.range()[0]) 
     .attr('y2', y.range()[1]) 
     .style('stroke', function(d,i,j) { return "#000"; }) 
     .style('stroke-width',1) 

    // @todo add vertical lines via transitions, add vLine content to toolbox 
}} 

谢谢你，拉斯，你的贡献..他们确实帮助了很多了解更详细的某些部分。

如果有人想出了一个更好的主意来解决这个问题，我将非常感谢，如果你可以发布这些建议在这里！