показывать только определенные часы с d3.js

Question

Я рисую цены на акции с интервалом в десять минут и длиной 10 дней. Конечно, фондовый рынок открыт только между 9:30 и 4. Как мне отображать только часть графика, которая находится между 9:30 и 4? Например Google финансов диаграммы https://www.google.com/finance?q=AAPL

var margin = {top: 10, right: 10, bottom: 10, left: 10}; 
var width = $('#'+stock.symbol+'_graph').width() - margin.left - margin.right; 
var height = 100 - margin.top - margin.bottom; 

var x = d3.time.scale().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

var xAxis = d3.svg.axis().scale(x).orient("bottom"); 
var yAxis = d3.svg.axis().scale(y).orient("left"); 

var line = d3.svg.area() 
    .x(function(d) { return x(d.date); }) 
    .y1(function(d) { return y(d.price); }) 
    .y0(height); 

var svg = d3.select('#'+stock.symbol+'_graph').append('svg') 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

x.domain(d3.extent(stockHistory, function(d) { return d.date; })); 
y.domain(d3.extent(stockHistory, function(d) { return d.price; })); 

svg.append("path") 
    .datum(stockHistory) 
    .attr("class", "line") 
    .attr("d", line); 

Answer 1

Я предполагаю, что вы хотите отобразить не только часть графика между 9:30 и 4:00, но диапазон каждого дня.

Вы можете сделать это, сжимая оставшиеся часы в одной и той же части диапазона, что может быть достигнуто за счет использования того, что шкалы d3 могут принимать ряд значений. Например, предположим, что у меня есть следующие данные:

var data = [ 
    {x:0, y:2},{x:0.5, y:2.2},{x:1.3,y:5},{x:2.0,y:3}, 
    {x:10,y:2},{x:10.7,y:4.6},{x:11.3,y:0},{x:12,y:2} 
    ]; 

Мои данные имеют только значения в диапазоне [0,2] и [10,12], поэтому я хотел бы, чтобы отобразить только те значения.

Я начинаю путем создания шкалы для рентгеновских значений, например, так:

var xscale = d3.scale.linear() 

Теперь мне нужно, чтобы установить домен.

.domain([0,2,10,12]) 

Это отрезает мой домен, по сути, на три части: [0,2], [2,10] и [10,12]. Если я также дам диапазон с массивом из четырех значений, я могу собрать кусочно-линейную шкалу. Предположим, что у меня есть SVG 500x500. Я планирую. Я хочу нанести на карту каждый интересный раздел моего домена до половины моего svg с небольшим отступом по краям и сопоставить всю скучную среднюю часть с одним значением , Чтобы сделать это, я поставляю следующий диапазон:

.range([10,250,250,490]) 

Теперь у меня есть следующие три отображения на моей кусочно-линейной шкале: [0,2] -> [10250], [2,10] -> [250250 ] и [10,12] -> [250,490]. Я эффективно отрезал середину моего домена.

Мне также необходимо исправить значения тика, так как если я построю это с осью x, d3 не будет достаточно умным, чтобы не пытаться отображать какие-либо значения для раздела домена, в котором я рухнул один пиксель. Я могу сделать это, явно объявляя свои ценности клеща:

var xAxis = d3.svg.axis() 
    .scale(xscale) 
    .orient('bottom') 
    .tickValues([0,1,2,11,12]) 

Я создал скрипку этого простого примера here. Тот же метод может быть применен к дорожкам вместо кругов, чтобы получить эффект, показанный в вашем примере.

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