Question

是否可以将鼠标悬停功能添加到此示例图：

http://bl.ocks.org/rgdonohue/9280446

赞赏任何建议。

Answer 1

找到了一种方法，通过在您应用合成孔径的部分上添加mouseover / mouseout。但是必须使用全局标签添加工具提示：

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

//apply choropleth
d3.select("#counties").selectAll(".county")
    .attr("fill", function (d) {
        return getColor(d.properties[attributeArray[currentAttribute]], dataRange);
    })
    .on("mouseover", function (d) {
        d3.select(this)
        div.transition()
            .duration(300)
        div.text(d.properties.County)
            .style("opacity", 1)
            .style("class", "cntyLabel")
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY) + "px");
    })
    .on("mouseout", function (d) {
        div.transition()
            .duration(300)
            .style("opacity", 0);
    })

D3.js：将鼠标悬停在动画贴图上

1 个答案: