javascript - 如何使十字准线远离 d3.js 的边缘？

Question

我试图理解这张图表背后的逻辑:http://bl.ocks.org/d3noob/6eb506b129f585ce5c8a由 D3noob 制作。我试图从焦点圆圈到边缘之前添加一条焦点线。我找到了一个部分解决方案:

// append the x line_up 
    focus.append("line")
        .attr("class", "x_track_line_up")
        .style("stroke", "black")
        .style("stroke", "3,3")
        .style("opacity", 0.9)
        .attr("y1", 0)
        .attr("y2", height);

//call the x line   
    focus.select(".x_track_line_up")
      .attr("transform",
            "translate(" + x(d.date) + "," +
                           y(d.close) + ")")
            .attr("y2", -height - y(d.close));

唯一的问题是这条添加的线也在上边距中绘制。我认为这里的问题是这部分代码的最后一行，但我不确定如何解决它。

Answer 1

您不需要翻译。只是做:

focus.select(".x_track_line_up")
    .attr("x1", x(d.date))
    .attr("x2", x(d.date))
    .attr("y2", y(d.close));

这是更新的 bl.ocks:http://bl.ocks.org/anonymous/dd1bb9adda42e4bc9768e9a35432197a