Question

我是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"
  }
}]

D3.js在已经有圆圈的时间轴上添加“线”

0 个答案: