NVIDIA Cumulative Line Chart: как установить другой задний цвет для конкретной оси X

Question

Я использую накопительную линейную диаграмму NVD3, она отлично подходит для меня, но я хочу установить другой цвет фона, чтобы выделить определенный час на оси X, так как i показаны ниже.

и устанавливать различный фон для графа для определенной части Как показаны в выше, я хочу, чтобы установить различные X - цвет оси для периода определенного времени.

Так что покажите мне любой возможный способ сделать это или любым возможным способом для этого.

Заранее спасибо.

Answer 1

Так, довольно большой хак здесь, но вы могли бы разобрать расположение оси и добавить его самостоятельно:

var startTick = 1, 
     endTick = 3; 
    var x1 = parseFloat(d3.select(d3.selectAll('.nv-x .tick')[0][startTick]).attr('transform').split("(")[1]); 
    var x2 = parseFloat(d3.select(d3.selectAll('.nv-x .tick')[0][endTick]).attr('transform').split("(")[1]); 
    d3.select('.nv-y .tick') 
    .append('line') 
    .attr('x1', x1) 
    .attr('x2', x2) 
    .style('stroke', 'black') 
    .style('stroke-width', 10); 

редактирует

Я просто повторно думал это. Вместо синтаксического анализа местоположения из DOM вы можете вернуть его из объекта диаграммы. Намного чище этот путь:

var x1 = chart.xScale()(1122782400000); 
var x2 = chart.xScale()(1251691200000); 
var height = chart.yAxis.range()[0]; 

// line on x-axis 
d3.select('.nv-y .tick') 
    .append('line') 
    .attr('x1', x1) 
    .attr('x2', x2) 
    .style('stroke', 'black') 
    .style('stroke-width', 10); 

// shaded background 
d3.select('.nv-y') 
    .append('rect') 
    .attr('x', x1) 
    .attr('width', x2 - x1) 
    .style('fill', 'steelblue') 
    .style('opacity', 0.2) 
    .attr('y', 0) 
    .attr('height', height); 

Пример here.