D3 - 使用一个 SVG 点击事件来影响另一个

Question

这是对question I asked a few days ago 的跟进。

在我的图表上，我希望原始图标在单击时具有动画效果，并且我还希望说明性文字淡入视图。我已经使用 InkScape 制作了文本并将其链接到代码中（就像其他图标一样）。

var coal = svg.append("svg:image")
.attr("xlink:href", "nouns/coal.svg")
.attr("width", 35)
.attr("height", 35)
.attr("x", 10)
.attr("y", 30)
.on("click", function() {
    d3.select(this).transition()
        .attr("x", function() {return d3.select(this).attr("x") == 10 ? 80 : 10; })
        .attr("y", function() {return d3.select(this).attr("y") == 30 ? 150 : 30; })
        .attr("width", function() {return d3.select(this).attr("width") == 35 ? 100 : 35; })
        .attr("height", function() {return d3.select(this).attr("height") == 35 ? 100 : 35; })
        .duration(750);
    d3.select(".coaltext").transition()
        .attr("opacity", function() {return d3.select(".coaltext").attr("opacity") == 0 ? 100 : 0 })
});

    svg.append("g")
        .append("svg:image")
        .attr("xlink:href", "testtext.svg")
        .attr("id", "coaltext")
        .attr("height", 200)
        .attr("width", 200)
        .attr("y", 170)
        .attr("x", 400)
        .attr("opacity", 0);

只有其他奇怪的事情是我收到以下错误消息： event.returnValue 已弃用。请改用标准 event.preventDefault()。 --jquery.min.js:2

这很奇怪，因为我没有将任何 jquery 库加载到我的脚本中。嗯。

Answer 1

您似乎想在选择元素时使用#coaltext 而不是.coaltext——它是一个ID，而不是一个类。