d3.js 在折线图的特定点按索引添加垂直线

Question

在三个相似的折线图（相同的数据集）之间画一条垂直线有些困难。

Var testdate1 包含一个日期，可在图表 （lc1.on(renderlet) 函数顶部） 索引位置 4（第 4 "circle.dot" 在折线图上）。

如何在图表的那个位置添加一条垂直线？（我希望在所有三个折线图的相同位置添加垂直线，但我希望所有三个都采用相同的程序）。

此外，出于某种原因，我无法将那个位置的圆圈设置为红色或绿色的点，尽管它在中有效——但在他的示例中，我们使用x 轴（日期），此代码使用 alldotsN 集合中的索引号——也看不出我在做什么错。

jsFiddle to experiment with

var chartHeight = 250;
var chartWidth = 500;
var myCSV = [ 
  {"shift":"1","date":"01/01/2016/08/00/00/+0500","car":"178","truck":"125","bike":"317","moto":"237"},
  {"shift":"2","date":"01/01/2016/17/00/00/+0500","car":"125","truck":"189","bike":"125","moto":"273"},
  {"shift":"3","date":"02/01/2016/08/00/00/-0500","car":"140","truck":"219","bike":"328","moto":"1252"},
  {"shift":"4","date":"02/01/2016/17/00/00/+0500","car":"222","truck":"290","bike":"432","moto":"378"},
  {"shift":"5","date":"03/01/2016/08/00/00/+0500","car":"200","truck":"250","bike":"420","moto":"319"},
  {"shift":"6","date":"03/01/2016/17/00/00/+0500","car":"230","truck":"220","bike":"310","moto":"413"},
  {"shift":"7","date":"04/01/2016/08/00/00/+0500","car":"155","truck":"177","bike":"377","moto":"180"},
  {"shift":"8","date":"04/01/2016/17/00/00/+0500","car":"179","truck":"203","bike":"405","moto":"222"},
  {"shift":"9","date":"05/01/2016/08/00/00/+0500","car":"208","truck":"185","bike":"360","moto":"195"},
  {"shift":"10","date":"05/01/2016/17/00/00/+0500","car":"150","truck":"290","bike":"315","moto":"280"},
  {"shift":"11","date":"06/01/2016/08/00/00/+0500","car":"200","truck":"220","bike":"350","moto":"205"},
  {"shift":"12","date":"06/01/2016/17/00/00/+0500","car":"230","truck":"170","bike":"390","moto":"400"}
];
var testdate1 = +new Date('Sun Jan 03 2016 08:00:00 GMT-0500 (Eastern Standard Time)');
lc1 = dc.lineChart("#line1");
lc2 = dc.lineChart("#line2");
lc3 = dc.lineChart("#line3");

var dateFormat = d3.time.format("%d/%m/%Y/%H/%M/%S/%Z");
myCSV.forEach(function (d) {
 d.date = dateFormat.parse(d.date);
 d.car = +d.car;
 d.bike = +d.bike;
 d.moto = +d.moto;
});

var facts = crossfilter(myCSV);

var dateDim = facts.dimension(function (d) {return d.date});
var carDim = facts.dimension(function (d) {return d['car']});
var dgCar = dateDim.group().reduceSum(function (d) {return d['car']});
var bikeDim = facts.dimension(function (d) {return d['bike']});
var dgBike = dateDim.group().reduceSum(function (d) {return d['bike']});
var motoDim = facts.dimension(function (d) {return d['moto']});
var dgMoto = dateDim.group().reduceSum(function (d) {return d['moto']});

var minDate = myCSV[0].date; //new Date ("2016-01-01T08:00:00.000Z");
var maxDate = myCSV[myCSV.length-1].date; //new Date ("2016-01-06T17:00:00.000Z"); 

lc1
  .renderArea(false)
  .width(chartWidth)
  .height(chartHeight)
  .dimension(dateDim)
  .group(dgCar)
  .defined(function(d) {if(d.y !==null) {return d.y;}})
  .transitionDuration(1000)
  .margins({top: 30, right: 20, bottom: 35, left: 60})
  .yAxisLabel('Cars')
  .renderHorizontalGridLines(true)
  .brushOn(false)
  .x(d3.time.scale().domain([minDate,maxDate]));
lc1.yAxis().ticks(5);
lc1.xAxis().ticks(3);

lc2
.renderArea(false)
.width(chartWidth)
.height(chartHeight)
.dimension(dateDim)
.group(dgBike)
.defined(function(d) {if(d.y !==null) {return d.y;}})
.transitionDuration(1000)
.margins({top: 30, right: 20, bottom: 35, left: 60})
.yAxisLabel('Bikes')
.renderHorizontalGridLines(true)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]));
lc2.yAxis().ticks(5);
lc2.xAxis().ticks(3);

lc3
.renderArea(false)
.width(chartHeight)
.height(250)
.dimension(dateDim)
.group(dgMoto)
.defined(function(d) {if(d.y !==null) {return d.y;}})
.transitionDuration(1000)
.margins({top: 30, right: 20, bottom: 35, left: 60})
.yAxisLabel('Motos')
.renderHorizontalGridLines(true)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]));
lc3.yAxis().ticks(5);
lc3.xAxis().ticks(3);


lc1.on('renderlet', function(lc1) {
   var thespot;
   var allDots1 = lc1.selectAll('circle.dot');
    allDots1.filter(function(d,i){ //d==datum (obj), i==index (of datapoint on line)
      if (+d.x===testdate1) thespot = i;
   });
    console.log('found spot: ' +thespot); //== 4th position on line
    //display red circle - NOT WORKING
    alldots1.filter((d,i) => i === thespot).classed('reddot',true);
    alldots2.filter((d,i) => i === thespot).classed('greendot',true);
    alldots3.filter((d,i) => i === thespot).classed('greendot',true);
    //display vertical line on all 3 graphs at same point - NOT WORKING
    alldots1
     .filter((d,i) => +i === +thespot)
     .append('line')
      .attr('x1', +testdate1)
      .attr('y1', chartHeight - margins.top)
      .attr('x2', +testdate1)
      .attr('y2', 0 + margins.top)
     .style("stroke-width", 2)
     .style("stroke", "red")
     .style("fill", "none");
    alldots2
     .filter((d,i) => +i === +thespot)
     .append('line')
      .attr('x1', +testdate1)
      .attr('y1', chartHeight - margins.top)
      .attr('x2', +testdate1)
      .attr('y2', 0 + margins.top)
     .style("stroke-width", 2)
     .style("stroke", "red")
     .style("fill", "none");
    alldots3
     .filter((d,i) => +i === +thespot)
     .append('line')
      .attr('x1', +testdate1)
      .attr('y1', chartHeight - margins.top)
      .attr('x2', +testdate1)
      .attr('y2', 0 + margins.top)
     .style("stroke-width", 2)
     .style("stroke", "red")
     .style("fill", "none");
});//END lc1.renderlet

dc.renderAll();
dc.redrawAll();

.reddot {
  stroke: red !important;
  fill: red !important;
  fill-opacity: 1 !important;
}

.greendot {
  stroke: green;
  fill: green;
  fill-opacity: 1 !important;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="//dc-js.github.io/dc.js/js/dc.js"></script>

<link href="//dc-js.github.io/dc.js/css/dc.css" rel="stylesheet" />


<svg id="line1"></svg>
<svg id="line2"></svg>
<svg id="line3"></svg>

Answer 1

var xScale = d3.time.scale().domain([minDate,maxDate]).range([screenMinX, screenMaxX]);

var vertLineXCoord = xScale(myCSV[pointYouWantToDrawLineAt].car); // or bike, or moto

vertLineXCoord 应该是垂直线的 x 坐标。

[screenMinX, screenMaxX]是图中最左边和最右边点的像素坐标。有关秤如何工作的更多说明，请参阅 here。

Answer 2

脚本中的错字：alldots1 应为 allDots1。更正后，出现红点。

Answer 3

http://jsfiddle.net/v6ehemnq/1/

这是我从其他两个答案中合并的更改摘要。

首先，我正确渲染了红点。

// fixed `alldots1` to `allDots1`, now the red point renders correctly
allDots1.filter((d, i) => i === thespot).classed('reddot', true);

然后我通过观察 screenMinX 和 screenMaxX 所在的位置来画线。您可能希望根据需要使用更精确的测量值。

var screenMinX = margins.left; // left most pixel coordinate of graph
var screenMaxX = margins.left + 408; // right most pixel coordinate of graph
var xScale = d3.time.scale().domain([minDate, maxDate]).range([screenMinX, screenMaxX]);
var vertLineXCoord = xScale(testdate1);

d3.select('#line1')
  .append('line')
  .attr('x1', vertLineXCoord)
  .attr('y1', chartHeight - margins.top)
  .attr('x2', vertLineXCoord)
  .attr('y2', 0 + margins.top)
  .style("stroke-width", 2)
  .style("stroke", "red")
  .style("fill", "none");

请注意，var margins 以前不存在，所以我创建它是为了让 margins.left 和 margins.top 可用。

Answer 4

通过使用 dc.js API:

它有一个更简单（且可重复使用）的解决方案

/* draw vertical lines code */
var line = d3.svg.line().interpolate('linear');
function draw_verticals(chart, points){
    // merge
    var selection = chart.g()
      .select('g.chart-body')
      .selectAll('path.horizontal')
      .data(points)
    // append
    selection.enter()
      .append('path')
      .attr('class', 'horizontal reddot')
      .attr('d', function(d) {
        var x = chart.x()(d);
        return line([
          [x, chart.y().range()[0]],
          [x, chart.y().range()[1]]
        ]);
      });
    // remove
    selection.exit().remove();
}
/*  ends here */

这样，您只需传递图表和要绘制垂直线的点数组，例如

draw_verticals(lc1, [testdate1, testdate2]);
draw_verticals(lc2, [testdate1, testdate2]);
draw_verticals(lc3, [testdate1, testdate2]);

Working demo

Reference

Reference's source code

额外

要与笔刷一起使用，必须

1) 对于每个图表，删除动画前的线条，

lcX.on('pretransition', function(c){
  draw_verticals(c, []);
});

2) 在leaflet事件

中重新绘制线条

lcX.on('renderlet', function(c) {
  var thespot;
  var allDots = c.selectAll('circle.dot');
  allDots.filter(function(d, i) { //d==datum (obj), i==index (of datapoint on line)
    if (+d.x === testdate1) thespot = i;
  });
  // fixed `alldots1` to `allDots1`, now the red point renders correctly
  allDots.filter((d, i) => i === thespot).classed('reddot', true);
  draw_verticals(c, (thespot?[testdate1]:[]));
});

d3.js 在折线图的特定点按索引添加垂直线

d3.js Adding a vertical line to a line chart at a specific point, by index

javascript

d3.js

dc.js