charts - 在 nvd3 上添加 X 值线

Question

我正在使用类似于示例折线图示例的图表。我想在图表上实现一个 x 值线，类似于这个 flot examples。

我尝试了以下类似的方法，但无法使其正常工作。这是jsFiddle。有任何想法吗？

   svg.on("mousemove",function(){
        //this is my attempt but clearly its not working
        m1 = d3.mouse(this);
        var line = svg.append("line")
                   .attr("y1",0)
                   .attr("y2",height)
                   .attr("x1", m1[0])
                   .attr("x2",m1[0]);

    });

Answer 1

我在这里更新了你的 jsFiddle http://jsfiddle.net/MyGqN/5/

让我们首先添加一行

 svg.append("line").attr("id","rLine");

在我们声明 svg 变量之后

然后将您的代码更改为

svg.on("mousemove",function(){
    m1 = d3.mouse(this);
    svg.selectAll("#rLine")
               .attr("y1",0)
               .attr("y2",height)
               .attr("x1", m1[0])
               .attr("x2",m1[0])
                .attr("stroke","red")
                .attr("stroke-width",2);

});