Question

我有一个mousemove功能，这样当用户将鼠标移到图表上时，一个带有一个框的顶部圆圈，显示信息，移动到最近的数据点。这一切都很好，除了圆圈出现在看起来非常糟糕的路径线下面。我希望这个圈子在这条线之上，但重新排序和使用z-index并不值得成功。任何帮助将不胜感激。这是我的mouseMove和draw函数，我认为它应该是唯一相关的代码。

rrd3.mouseMove = function(){
    var xMouse = rrd3.xScale.invert(d3.mouse(this)[0]),
        index = d3.bisector(function(d){return d.timestamp}).left(rrd3.data, xMouse, 1),
        d0 = rrd3.data[index - 1],
        d1 = rrd3.data[index],
        d;

        if(d0 == undefined){
            d0 = d1;
        }
        if(d1 == undefined){
            d1 = d0;
        }

        if((xMouse - d0.timestamp) > (d1.timestamp - xMouse))
            d = d1;
        else 
            d = d0;

    d3.select(".focusCircle")
        .attr("cx", rrd3.xScale(d.timestamp))
        .attr("cy", rrd3.yScale(d.count));

    d3.select(".focusLine")
        .attr("x1", rrd3.xScale(d.timestamp))
        .attr("y1", 0)
        .attr("x2", rrd3.xScale(d.timestamp))
        .attr("y2", rrd3.height)
        .attr("stroke-width", 2);

    rrd3.tooltip.style("top", rrd3.yScale(d.count) - 10 + "px");
    rrd3.tooltip.style("left", rrd3.xScale(d.timestamp) + rrd3.leftMargin + "px");
    rrd3.tooltip.html("<div style='text-align: center;'>" + d.count + "</div>Listeners");
};

rrd3.draw = function(){
    d3.select(".line").remove();
    d3.select(".areapath").remove();

    rrd3.graph.append("path")
        .datum(rrd3.data)
        .attr("class", "line")
        .attr("d", rrd3.line)
        .attr("fill", "none")
        .attr("stroke", "#5a8fc2")
        .attr("stroke-width", "1.5px");

    rrd3.graph.append("path")
        .datum(rrd3.data)
        .attr("class", "areapath")
        .attr("d", rrd3.area);
};

Answer 1

您可以使用d3.js的sort（）函数来更改svg顺序这是一个示例代码。

// draw a circle
d3.select("svg").append("circle").datum({type: "circle"}).attr({
    cx: 100,
    cy: 100,
    r: 30,
    fill: "blue"
});
// draw a triangle
d3.select("svg").append("path").datum({type: "triangle"}).attr({
    d: "M100,100 L150,150 V100 z",
    fill: "red"
});

// Here, triangle is shown over circle,
// because it is positioned after circle.
// e.g. 
// <svg>
//     <circle ... />
//     <path ... />
// </svg>

// re-order by sort() function
d3.selectAll("circle, path").sort(function(d1, d2) {
    if (d1.type === d2.type)
        return 0;
    return d1.type === "circle" ? 1 : -1;
});

// Here, circle is shown over triangle.
// <svg>
//     <path ... />
//     <circle ... />
// </svg>

如何让svg圆圈始终出现在我的图形线路径上方？

1 个答案: