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 при выборе элемента - это идентификатор, а не класс.