Question

每当有mouseover事件时，我想要一个围绕每个单独图例的框。我的传奇形式是这样的：

var legend = svg.selectAll(".legend")
    .data(zColor.domain())
    .enter().append("g")
    .style("zIndex", 1)
    .attr("class", "legend")
    .attr("transform", function (d, i) {
        return "translate(0," + i * 22 + ")";
    });

legend.append("rect")
    .attr("x", xScale(d3.max(data, xValue)) * 1.05)
    .attr("y", -12)
    .attr("width", 18)
    .attr("height", 18)
    .attr("fill", zColor)
/*
-----------------------------------------------------------------------
I want this effect to happen on the entire <g>, not just on the <rect>.
-----------------------------------------------------------------------
    .on("mouseover", function () {
        d3.select(this).style("stroke-width", 2).style("stroke", "black");
    })
    .on("mouseout", function () {
        d3.select(this).style("stroke-width", 0);
    });
*/
legend.append("text")
    .attr("x", xScale(d3.max(data, xValue)) * 1.05 + 20)
    .attr("y", 0)
    .style("text-anchor", "start")
    .text(function (d) {
        return d;
    });

如何在<g.legend>级别进行操作？我试图在每个周围围绕一个<div>，但整个传说都消失了。

[更新]

这就是我在<div>和<g>和<rect>下添加<text>的做法。但是，在这种情况下不会绘制图例。

var legend = svg.selectAll(".legend")
    .data(zColor.domain())
    .enter().append("g")
    .style("zIndex", 1)
    .attr("class", "legend")
    .attr("transform", function (d, i) {
        return "translate(0," + i * 22 + ")";
    });
var legendDiv = legend.append("div").style("stroke-width", 2).style("stroke", "black");
legendDiv.append("rect")
    .attr("x", xScale(d3.max(data, xValue)) * 1.05)
    .attr("y", -12)
    .attr("width", 18)
    .attr("height", 18)
    .attr("fill", zColor);
legendDiv.append("text")
    .attr("x", xScale(d3.max(data, xValue)) * 1.05 + 20)
    .attr("y", 0)
    .style("text-anchor", "start")
    .text(function (d) {
        return d;
    });

Answer 1

代码执行时

legend.append("rect")

结果是附加的矩形。（D3在这方面不就像jQuery一样。）

相反，你想要

legend.on("mouseover", function() {/*...*/});     // ...

d3在<g> </g>下创建传奇边框

1 个答案: