Блог

я разрабатываю диаграмму, используя d3 для своего приложения, ниже приведены мои данные

 data = [date : { "jan", "feb", "mar", "apr", "may", "jun"},
        open : { 12, 21, 32, 34, 45, 11}]

data1 = [date : { "jan", "feb", "mar", "apr", "may", "jun"},

         close = {2, 3, 1, 0.5 , 5, 6}]
 

// код, который я использовал, чтобы получить минимальное и максимальное значение

 var xmin = d3.min(data, (d:{ date: any; }) => d.date);
var xmax = d3.max(data, (d:{ date: any; }) => d.date);
var yMin = d3.min(data, (d:{ open: any; }) => d.open);
var yMax = d3.max(data, (d:{ open: any; }) => d.open);
var yMin2 = d3.min(data1, (d:{ close: any; }) => d.close );
var yMax2 = d3.max(data1, (d:{ close: any; }) => d.close );

var min = math.min(yMin, yMin2);
var max = math.max(yMax, yMax2);

output min of both(open and close) is  = 0.5
output max of both(open and close) is  = 45
 

теперь я хочу использовать min и max для определения оси

 // range of data configuring
var ScaleX = d3.scaleTime().domain([xMin, xMax]).range([0, width]);
var ScaleY = d3.scaleLinear().domain([min, max]).range([height, 0]);

var histChrtSvg = d3.select('#my_dataviz').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   ')');
 

Здесь я определяю свои оси и преобразую их в процентные значения, разделив точки данных на первое значение открытия и закрытия

 var histChrtScaleYAxis = d3.axisLeft(ScaleY).tickFormat((d: any) => Math.round(d*100/data[1].open)   '%');
var histChrtScaleYAxis2 = d3.axisLeft(ScaleY).tickFormat((d: any) => Math.round(d*100/data1[1].close)   '%');

  histChrtSvg.append('g')
              .attr('transform', 'translate(0,'   height   ')')
              .call(d3.axisBottom(ScaleX));
    histChrtSvg.append('g').call(histChrtScaleYAxis).call(histChrtScaleYAxis2);
    histChrtSvg.append('g').call(histChrtScaleYAxis2);

 

Это место, где я застрял , я не понимаю, какую ось выбрать, поскольку я конвертирую данные, а данные поступают из 2 наборов данных, какую ось я должен использовать?

 // Genereating line - for sdaCloses 
    var line = d3.line()
                .x( (d: any) => ScaleX(d.date))
                .y( (d: any) => ScaleY(d.open))
                .curve(d3.curveCardinal);
    var line2 = d3.line()
                  .x( (d: any) => ScaleX(d.date))
                  .y( (d: any) => ScaleY2(d.close))
                  .curve(d3.curveCardinal);
    histChrtSvg.append('path')
                .attr('class', 'line') //Assign a class for styling
                .datum(Data) // Binds data to the line
                .attr('d', line as any);
    histChrtSvg.append('path')
                .attr('class', 'line2') //Assign a class for styling
                .style('stroke-dasharray', ('3, 3'))
                .datum(Data1) // Binds data to the line2
                .attr('d', line2 as any);
 

below is the graph i’m trying to plot.

Thanks for your help in advance… Let me know if you need additional details