D3.js Добавить «линию» на временной шкале, которая уже имеет круги - PullRequest
Новая
       18

D3.js Добавить «линию» на временной шкале, которая уже имеет круги

0 голосов
/ 03 июля 2018

Я новичок в D3.js и работаю над графиками, которые имеют общую временную шкалу.

Изображение моей текущей временной шкалы

Данные идут с датой, которую я превращаю в метку времени Unix. Временная шкала является перетаскиваемой, и все «круги» работают как положено, и они следуют временной шкале Моя проблема начинается, когда я пытаюсь добавить «линию». Форма находится в конце временной шкалы и не соответствует изменению во времени. В идеале я хочу иметь возможность нарисовать толстую «линию», которая будет размещена на временной шкале в соответствии с датой начала и окончания.

Вот мой код для кругов: 

function drawMarkers(dataset, x, y, radius, hoverRadius) {

  let pointGroup = that.g.selectAll('.point-group');
  let tooltipFormat = that.tooltipData();

  pointGroup.selectAll('.marker')
  .data(dataset, function(d) { return d.ts; })
  .enter()
  .append('circle')
  .classed('marker', true)
  .attr('cx', function(d) { return x(d.ts); })
  .attr('cy', function(d) { return y(d.value); })
  .attr('r', function(d){ return radius; })
  .each(that.markerClass)
  .on('mouseover', function(d) {
    tooltip.show(d, tooltipFormat.keyFn, tooltipFormat.dataFn);
    d3.select(this)
      .transition()
      .attr('r', function(d){ return hoverRadius; });
  })
  .on('mouseout', function(d) {
    tooltip.hide();
    d3.select(this)
      .transition()
      .attr('r', function(d){ return radius; })
  })
  .on('click', function (d) {
      // console.log('marker chart clicked', d);
      if (markerClicked) {
        console.log(d);
        markerClicked(d);
      }
  });
 }

Это изменение, которое я пытался отобразить в строках: 

function drawMarkers(dataset, x, y, radius, hoverRadius) {

  let pointGroup = that.g.selectAll('.point-group');
  let tooltipFormat = that.tooltipData();

  pointGroup.selectAll('.marker')
  .data(dataset, function(d) { return d.ts; })
  .enter()
  .append('line')
  .classed('marker', true)
  .classed('markerRect', true)
  .attr("x1", function(d) { return x(d.ts); })
  .attr("y1", function(d) { return y(d.value); })
  .attr("x2", function(d) { return x(d.ts2); })
  .attr("y2", function(d) { return y(d.value); })
  .each(that.markerClass)
  .on('mouseover', function(d) {
    tooltip.show(d, tooltipFormat.keyFn, tooltipFormat.dataFn);
  })
  .on('mouseout', function(d) {
    tooltip.hide();
  })
  .on('click', function (d) {
      // console.log('marker chart clicked', d);
      if (markerClicked) {
        console.log(d);
        markerClicked(d);
      }
  });
 }

Любой совет будет очень признателен!

РЕДАКТИРОВАТЬ: мои данные выглядят так (массив объектов): 

[{
  "ts": 1530504433000,
  "ts2": 1531504433000,
  "value": 0,
  "action": "string",
  "_details": {
    "name": "Name",
    "value": 0,
    "even": false,
    "useris": "483",
    "action": "string action"
  }
}]
...