Question

我有一组可以在页面中动态添加和删除的图表。每个人都有一个看不见的＆＃39; rect＆＃39;附加到托管每个图形的基础svg的元素，并在该rect元素上我可以附加鼠标悬停元素。但是，这些都限于鼠标悬停在单个svg / rect上;我想扩展它们以涵盖所有可见图表。这是影响它的主要代码：

var focus = svg.append('g') // An invisible layer over the top. Problem is, it only overlays on one graph at a time...
            .style('display', 'none');
svg.append("rect")
            .attr("width", width)
            .attr("height", height)
            .style("fill", "none")
            .style("pointer-events", "all")
            .on("mouseover", function() { focus.style("display", null); })
            .on("mouseout", function() { focus.style("display", "none"); })
            .on("mousemove", mousemove);

// append the x line
        focus.append("line")
            .attr("class", "x")
            .style("stroke", "blue")
            .style("stroke-dasharray", "3,3")
            .style("opacity", 0.5)
            .attr("y1", 0)
            .attr("y2", height);

function mousemove() {                            
            var x0 = x.invert(d3.mouse(this)[0]),         
                i = bisectDate(dataset, x0, 1),              
                d0 = dataset[i - 1],                         
                d1 = dataset[i],                             
                d = x0 - d0.time > d1.time - x0 ? d1 : d0;
    focus.select(".x")
                .attr("transform", function() { 
                    return "translate(" + x(d.time) + "," + rightDomain(symbol, d) + ")"; 
                })
                .attr("y2", height - y(d[symbol]));
}

所有这些都在forEach（）循环中，在循环中包含要显示的图形名称的数组，因此显示多个图形（尽管在它们各自的svgs中）。

我这里也有一个傻瓜：http://plnkr.co/edit/s4K84f5HGRjHFWMwiuIA?p=preview。我不确定为什么它无法正常工作，因为我已经复制并粘贴了我的代码，我知道这些代码可以在其他地方使用。

编辑：我设法将另一个svg元素附加到正文但由于某种原因我无法将其覆盖在现有的svgs（图表）之上。这是我的代码（我已经尝试了几种调整位置的方法）：

var overlay = d3.select('html')
                .append('div')
                .attr('height', function() { return (symbols.length - 1) * 135 + 130; })
                .attr('width', 1000)
                .attr('z-index', 2)
                //.attr('transform', 'translate(' + margin.left + ',' + extraBuffer/2 + ')');
                //.attr('x', margin.left)
                //.attr('y', extraBuffer/2);
                .attr('position', 'absolute')
                .attr('top', '20')
                .attr('right', '40');

在chrome devtools中查看此内容我总是在现有图表下方看到它，即使我明确设置其x / y值。

d3js：将悬停叠加层叠放在多个图形上

0 个答案: