Получение значения атрибутов SVG в D3.js

Question

Я новичок в D3.js и пытаюсь создать прямоугольники, представляющие все узлы из XML-файла. Пока что так хорошо, но я хочу интерактивность с каждым из прямоугольников, которые я рисую, и иметь возможность захватывать узлы, которые были затронуты для дальнейшей обработки. Итак, допустим, я нажимаю на прямоугольник, я могу заставить его реагировать, делая событие onclick (например, увеличивая размер шрифта), но я не могу получить некоторую информацию. Я хотел бы создать массив с текстом каждого элемента, который был нажат.

Вот код одного экземпляра прямоугольника.

d3.select("#chart") 
.append("svg") 
.attr("width", 600) 
.attr("height", 2000) 
.style("background", "#93A1A1") 

d3.select("svg") 
    .append("rect").attr("x", 50) 
    .attr("y", 25) 
    .attr("height", 20) 
    .attr("width", 200) 
    .attr("title", "resourceDef") 
    .style("fill", "#CB4B19") 

d3.select("svg") 
    .append("text") 
    .attr("x", 55) 
    .attr("y", 37) 
    .attr("font-size", 11) 
    .attr("font-family", "sans-serif") 
    .text("resourceDef") 
    .on("mouseover", function(d) { 
    tempText = this.text; 
    alert(tempText); 
d3.select(this) 
    .attr("font-size", 15)}) 
    .on("mouseout", function(d) { 
    d3.select(this) 
    .attr("font-size", 11)}) 

Я могу получить информацию о стиле, используя, но не заголовок, и я не могу найти эту информацию нигде. Спасибо за вашу помощь, я знаю, что это долгий вопрос, возможно, с простым ответом.

Answer 1

Вы можете прикрепить курсор события на прямоугольнике DOM, делая что-то вроде этого:

d3.select("svg") 
    .append("rect").attr("x", 50) 
    .attr("y", 25) 
    .attr("height", 20) 
    .attr("width", 200) 
    .attr("title", "resourceDef") 
    .style("fill", "#CB4B19") 
    .on("click", function (d) { 
    var t = d3.select(this).attr("title"); 
    //pushing the title into the array. 
    clickedTitles.push(t); 
    console.log(t); 
}); 

Вы можете получить атрибут DOM (в вашем случае Tite), делая что-то вроде этого:

.on("click", function (d) { 
    var t = d3.select(this).attr("title"); 
    clickedTitles.push(t); 
    console.log(t) 
}) 

Вы можете сохранить щелкнул прямоугольники название в массиве, как это:

//create an array 
var clickedTitles = []; 
//in your click function push the title into the array 
clickedTitles.push(t); 

//use the clickedTitles where ever you need in the code 

Fu Код - here.