在三个相似的折线图（相同的数据集）上设置垂直线有些困难。
Var testdate1包含一个日期，可在索引pos 4（第4个“circle.dot”）的图表（lc1.on(renderlet)函数的顶部）上找到线型图）。
如何在该位置向图表添加垂直线？ （我希望在所有三个折线图上的相同位置添加垂直线，但我希望它们对于所有三个折线图都是相同的。）
另外，出于某种原因，我无法将该位置的圆圈设置为红色或绿色圆点，尽管它在this SO answer by davcs86中有效 - 但在他的示例中我们使用x-找到圆点axis（date），这段代码使用了alldotsN集合中的索引号 - 看不出我在这里做错了。
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>
答案 0 :(得分：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和cordova可用。
答案 1 :(得分：3)
使用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
其他
要与画笔一起使用，您必须
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]:[]));
});
答案 2 :(得分：2)
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。
答案 3 :(得分：2)
脚本中的错字：min-width应为alldots1。纠正后，会出现红点。