Как превратить диаграмму в линейную диаграмму в d3? - PullRequest
0 голосов
/ 06 января 2020

Я нашел отличную подсвечник, сделанный с помощью D3. JS здесь: https://bl.ocks.org/anilnairxyz/raw/a51393d7c51342abe8d4e3f4cbab7ae1/ Модули пакета находятся здесь: https://gist.github.com/anilnairxyz/a51393d7c51342abe8d4e3f4cbab7ae1

Для моих целей я хочу изменить нижнюю диаграмму на линейный график. Поэтому я добавил функцию в основной файл. js под двумя существующими:

function displayCS() {
    var chart       = cschart().Bheight(460);
    d3.select("#chart1").call(chart);
    var chart       = barchart().mname("volume").margin(320).MValue("TURNOVER");
    d3.select("#chart1").datum(genData).call(chart);
    var chart       = linechart().mname("comshort").margin(400).MValue("LINE");
    d3.select("#chart1").datum(genData).call(chart);

Я также добавил csline. js в мои скрипты. До сих пор я только что изменил несколько строк в существующих csbars. js пакета. Это новый csline. js:

function linechart() {

  var margin = {top: 400, right: 30, bottom: 10, left: 5 },
      width = 1000, height = 60, mname = "mline1";

  var MValue = "LINES";

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

      var x = d3.scale.ordinal()
          .rangeBands([0, width]);

      var y = d3.scale.linear()
          .rangeRound([height, 0]);

      var xAxis = d3.svg.axis()
          .scale(x)
          .tickFormat(d3.time.format(TFormat[TIntervals[TPeriod]]));

      var yAxis = d3.svg.axis()
          .scale(y)
          .ticks(Math.floor(height/50));

      var svg = d3.select(this).select("svg")
         .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      x.domain(data.map(function(d) { return d.TIMESTAMP; }));
      y.domain([0, d3.max(data, function(d) { return d[MValue]; })]).nice();

      var xtickdelta   = Math.ceil(60/(width/data.length))
      xAxis.tickValues(x.domain().filter(function(d, i) { return !((i+Math.floor(xtickdelta/2)) % xtickdelta); }));

      svg.append("g")
          .attr("class", "axis yaxis")
          .attr("transform", "translate(" + width + ",0)")
          .call(yAxis.orient("right").tickFormat("").tickSize(0));

      var barwidth    = x.rangeBand();
      var fillwidth   = (Math.floor(barwidth*0.7)/2)*2+1;  // Breite der Volumenbars
      var bardelta    = Math.round((barwidth-fillwidth)/2);

      var mbar = svg.selectAll("."+mname+"bar")
          .data([data])
        .enter().append("g")
          .attr("class", mname+"bar");

      mbar.selectAll("rect")
          .data(function(d) { return d; })
        .enter().append("rect")
          .attr("class", mname+"fill")
          .attr("x", function(d) { return x(d.TIMESTAMP) + bardelta; })
          .attr("y", function(d) { return y(d[MValue]); })
          .attr("class", function(d, i) { return mname+i; })
          .attr("height", function(d) { return y(0) - y(d[MValue]); })
          .attr("width", fillwidth);
    });
  }
  barrender.mname = function(value) {
            if (!arguments.length) return mname;
            mname = value;
            return barrender;
        };

  barrender.margin = function(value) {
            if (!arguments.length) return margin.top;
            margin.top = value;
            return barrender;
        };

  barrender.MValue = function(value) {
            if (!arguments.length) return MValue;
            MValue = value;
            return barrender;
        };

return linerender;
} 

Как мне сделать линейную диаграмму вместо диаграммы? Данные хранятся в csv-файле и должны отображаться в самой нижней части модуля.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...