d3.js通过索引

将垂直线添加到特定点处的折线图在三条相似折线图（相同数据集）之间建立垂直线有些困难。d3.js通过索引

瓦尔testdate1包含日期，这是在该图表（该lc1.on(renderlet)函数的顶部）发现在索引POS 4（在应用于LineChart第四“circle.dot”）。

我该如何在该位置向图表添加垂直线？（我希望在所有三个折线图上的相同位置添加垂直线，但我希望这三个线图都是相同的程序）。

此外，出于某种原因，我无法在该位置获得圆形作为红色或绿色点的样式，尽管它在this SO answer by davcs86中有效 - 但在他的示例中，我们使用x轴（日期），并且这段代码在alldotsN集合中使用索引号 - 无法看到我在这里做错了什么。

jsFiddle to experiment with

var chartHeight = 250; 
 
var chartWidth = 500; 
 
var myCSV = [ \t 
 
    {"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) { 
 
\t d.date = dateFormat.parse(d.date); 
 
\t d.car = +d.car; 
 
\t d.bike = +d.bike; 
 
\t 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; \t //new Date ("2016-01-06T17:00:00.000Z"); \t 
 

 
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) { 
 
    \t var thespot; 
 
    \t var allDots1 = lc1.selectAll('circle.dot'); 
 
    allDots1.filter(function(d,i){ //d==datum (obj), i==index (of datapoint on line) 
 
    \t \t if (+d.x===testdate1) thespot = i; 
 
\t }); 
 
    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 
 
    \t .filter((d,i) => +i === +thespot) 
 
    \t .append('line') 
 
     .attr('x1', +testdate1) 
 
     .attr('y1', chartHeight - margins.top) 
 
     .attr('x2', +testdate1) 
 
     .attr('y2', 0 + margins.top) 
 
    \t \t .style("stroke-width", 2) 
 
    \t \t .style("stroke", "red") 
 
    \t \t .style("fill", "none"); 
 
    alldots2 
 
    \t .filter((d,i) => +i === +thespot) 
 
    \t .append('line') 
 
     .attr('x1', +testdate1) 
 
     .attr('y1', chartHeight - margins.top) 
 
     .attr('x2', +testdate1) 
 
     .attr('y2', 0 + margins.top) 
 
    \t \t .style("stroke-width", 2) 
 
    \t \t .style("stroke", "red") 
 
    \t \t .style("fill", "none"); 
 
    alldots3 
 
    \t .filter((d,i) => +i === +thespot) 
 
    \t .append('line') 
 
     .attr('x1', +testdate1) 
 
     .attr('y1', chartHeight - margins.top) 
 
     .attr('x2', +testdate1) 
 
     .attr('y2', 0 + margins.top) 
 
    \t \t .style("stroke-width", 2) 
 
    \t \t .style("stroke", "red") 
 
    \t \t .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>

来源

2017-05-27 crashwap

一些第一想法：是否（renderlet）可以运行吗？没有在我的iPad上。因此，也没有你期望的东西。圆形格式对我来说看起来没问题，应该可以工作。追加行看起来不正确。你不应该将该行添加到svg吗？它现在的方式将被添加到选定的圆圈内。 – Florian

它具有通过使用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）对于每个图表中删除动画之前的线（S），与

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

2）重画线（S）在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]:[])); 
});

来源

2017-05-30 15:22:42 davcs86

太棒了！但是有一个问题 - 它不随刷子移动。如果使用画笔放大时间窗口，数据点会展开，并且pinkdot会移动，但垂直线会保留在原来的位置。对此有何建议？ – crashwap

（我正在jsFiddle演示台上工作） – crashwap

好的，当你完成时发给我jsfiddle。 – davcs86

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。

来源

2017-05-27 08:10:06 ToxicTeacakes

计算完此坐标后，如何将其添加到折线图？ – 1252748

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

来源

2017-05-27 09:29:04 Florian

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可用。

来源

2017-05-30 00:59:07 therobinkim

总结得很好。 – Florian

d3.js通过索引

回答

相关问题