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

謝謝你，拉斯，你的貢獻..他們確實幫助了很多瞭解更詳細的某些部分。

如果有人想出了一個更好的主意來解決這個問題，我將非常感謝，如果你可以發佈這些建議在這裏！