d3.js：垂直移动线与两个线图的交点

我使用d3绘制线图。我想要做的是找到一个垂直移动线与两个线图的交点。d3.js：垂直移动线与两个线图的交点

现在，小提琴中的代码只能找到一个图形的交点。

rect.on('mousemove', function() { 

var xPos = d3.mouse(this)[0]; 
d3.select(".verticalLine").attr("transform", function() { 
return "translate(" + xPos + ",0)"; 
}); 


var pathLength = mainLine.node().getTotalLength(); 
    var x = xPos; 
var beginning = x, 
    end = pathLength, 
    target; 
while (true) { 
target = Math.floor((beginning + end)/2); 
pos = mainLine.node().getPointAtLength(target); 
if ((target === end || target === beginning) && pos.x !== x) { 
    break; 
} 
if (pos.x > x) end = target; 
else if (pos.x < x) beginning = target; 
else break; //position found 
} 
     circle.attr("opacity", 1) 
      .attr("cx", x) 
     .attr("cy", pos.y); 


    console.log("x and y coordinate where vertical line intersects graph: " + [pos.x, pos.y]); 
    console.log("data where vertical line intersects graph: " + [xScale.invert(pos.x), yScale.invert(pos.y)]); 
});

http://jsfiddle.net/2SURM/

来源

2013-12-16 asdfdefsad

鉴于您有一行代码，您应该能够弄清楚如何为另一行执行此操作。 –

http://jsfiddle.net/2SURM/1/我已经做到了，但图2上的点并不完全在同一行上，它是在垂直线前面的一些像素，并且在第二张图上的鼠标移动不起作用，而我已经写入整个矩形的代码。 – asdfdefsad

你必须改变

<div id="graph1" class="aGraph" style="position:absolute;top:300px;"></div>

到

<div id="graph1" class="aGraph" style="position:absolute;top:300px; left:0; float:left;"></div>

现在图2是在同一行与图1这是小提琴 - http://jsfiddle.net/2SURM/2/

这里是工作鼠标移动第2图上的小提琴。我在第二张图的后面添加了第二个矩形。 http://jsfiddle.net/cuckovic/2SURM/3/

来源

2013-12-16 12:13:22 cuckovic

是的，它解决了这个问题，但在第二个图上的鼠标移动不起作用。 – asdfdefsad

这是因为图2是在不同的div和不同的svg那里它没有背景中的矩形。 – cuckovic

你能帮我把这两张图合在一起吗？ – asdfdefsad

d3.js：垂直移动线与两个线图的交点

回答

相关问题