D3.js:折线图 - 工具提示和悬停的垂直线

Question

我一直在使用D3.js构建的交互式折线图.一个悬停我想要一个工具提示显示垂直线.垂直线很好,但是,我有与工具提示有关的问题.工具提示位置不在图表上,我只获得第一个数据元素.

这是我的代码:

 margin = {
                    top: 20,
                    right: 20,
                    bottom: 20,
                    left: 50
                };
        var width = Math.max(250, Math.min(700, d3.select("#content").width- margin.left - margin.right)),
                    height = 500;

        var vis = d3.select("#line_chart").append("svg")
                            .attr("width", width + margin.left + margin.right)
                            .attr("height", height + margin.top + margin.bottom);

        max_x = 0, max_y = 0, min = 100;

        d3.csv("line.csv", function(error, data) {


                for(i=0; i < data.length; i++){
                    max_y = Math.max(max_y, data[i].number);
                    max_x = Math.max(max_x, data[i].class);
                    min = Math.min(min, data[i].class);
                }


                    xScale = d3.scale.linear().range([margin.left, width - margin.right]).domain([min, max_x]),

                    yScale = d3.scale.linear().range([height - margin.top, margin.bottom]).domain([0, max_y]),

                    xAxis = d3.svg.axis()
                    .scale(xScale),

                    yAxis = d3.svg.axis()
                    .scale(yScale)
                    .orient("left");

                vis.append("svg:g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + (height - margin.bottom) + ")")
                    .call(xAxis);

                vis.append("svg:g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + (margin.left) + ",0)")
                    .call(yAxis);

                var lineGen = d3.svg.line()
                    .x(function(d) {
                        return xScale(d.class);
                    })
                    .y(function(d) {
                        return yScale(d.number);
                    })
                    .interpolate("basis");

                var pth = vis.append('svg:path')
                    .attr('d', lineGen(data))
                    .attr('stroke', '#000')
                    .attr('stroke-width', 3.5)
                    .attr('fill', 'none');

                var totalLength = pth.node().getTotalLength();

                pth
                  .attr("stroke-dasharray", totalLength + " " + totalLength)
                  .attr("stroke-dashoffset", totalLength)
                  .transition()
                    .duration(2400)
                    .ease("linear")
                    .attr("stroke-dashoffset", 0);

                //Line chart mouse over 
                var hoverLineGroup = vis.append("g")
                                    .attr("class", "hover-line");

                var hoverLine = hoverLineGroup
                    .append("line")
                        .attr("stroke", "#000")
                        .attr("x1", 10).attr("x2", 10) 
                        .attr("y1", 0).attr("y2", height); 

                var hoverTT = hoverLineGroup.append('text')
                   .attr("class", "hover-tex capo")
                   .attr('dy', "0.35em");

                var cle = hoverLineGroup.append("circle")
                    .attr("r", 4.5);

                var hoverTT2 = hoverLineGroup.append('text')

                   .attr("class", "hover-text capo")
                   .attr('dy', "0.35em");

                hoverLineGroup.style("opacity", 1e-6);

                var rectHover = vis.append("rect")
                  .data(data)
                  .attr("class", "overlay")
                  .attr("width", width)
                  .attr("height", height);

                rectHover  
                    .on("mouseout", hoverMouseOff)
                    .on("mousemove", hoverMouseOn);

                function hoverMouseOn(d) {

                      var mouse_x = d3.mouse(this)[0];
                      var mouse_y = d3.mouse(this)[1];
                      var graph_y = yScale.invert(mouse_y);
                      var graph_x = xScale.invert(mouse_x);

                      hoverTT.text("Marks: " + Math.round(graph_x * 100)/100); 
                      hoverTT.attr('x', mouse_x + 10);
                      hoverTT.attr('y', yScale(d.class));


                      hoverTT2.text("Frequency: " + Math.round(d.number * 100)/100)
                        .attr('x', mouse_x + 10)
                        .attr('y', yScale(d.class) +15);

                      cle
                        .attr('x', mouse_x)
                        .attr('y', mouse_y);


                      hoverLine.attr("x1", mouse_x).attr("x2", mouse_x)
                      hoverLineGroup.style("opacity", 1);

                }

                function hoverMouseOff() {
                        hoverLineGroup.style("opacity", 1e-6);
                };

            });
        }

数据:

class,number
25,1
30,7
35,11
45,13
50,21
55,23
60,30
65,41
75,39
80,24
85,14
90,4
95,8
100,2

我无法弄清问题是什么.

我怎么解决这个问题？

提前致谢.

编辑:这是工作代码:https://jsfiddle.net/kan83q0m/1/

Answer 1

在hoverMouseOn方法中,变量d未定义.您需要使用d3.bisector查找最近的数据点,如下所示:

var bisectDate = d3.bisector(function(d) { return d.class; }).left;

var mouseDate = xScale.invert(mouse_x);
var i = bisectDate(data, mouseDate);

var d0 = data[i - 1]
var d1 = data[i];
var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;

另外,我把mousemove监听器放在'vis'而不是'rectHover'上:

        vis  
            .on("mouseout", hoverMouseOff)
            .on("mousemove", hoverMouseOn);

并使用d.number而不是d.class作为y值.如果您希望工具提示始终在线上,它会变得有点复杂.这是一个工作小提琴.

可能更容易将工具提示放在鼠标坐标上,就像在这个小提琴中一样.