Как я могу переключить значение текстового элемента svg с помощью D3.js, когда пользователь щелкает текст?
Я только начал изучать D3.js и написал небольшую программу для проверки некоторых идей, которые я планирую реализовать в более крупной программе. Ссылаясь на код здесь, начальное значение текста равно 0. Я пытаюсь, чтобы значение переключалось между 1 и 0, когда пользователь нажимает на текст. Что-то не так с тем, что я закодировал в .on("click"...), потому что текст не меняется на 1. Что я делаю неправильно?
Я нашел примеры обновления .attr, но ничего не могу найти о переключении .text нужным мне образом.
var txt1 = g.append("text")
.attr("id", "txt1")
.text("0")
.attr("x", 10)
.attr("y", 17)
.attr("font-family", "Arial")
.attr("font-size", "12")
.attr("fill", "black")
.on("click", function(){
if (d3.select(this).text === "0"){
d3.select(this).text("1")
}
else{
d3.select(this).text("0");
}
} )
Когда я нажимаю на текстовый элемент в первый раз, я ожидаю, что он изменится на «1».
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Чтобы получить текстовое содержимое элемента SVG напрямую, вы можете использовать textContent или innerHTML в современных браузерах. Например:
var svg = d3.select("svg")
var txt1 = svg.append("text")
.text("0")
.attr("x", 10)
.attr("y", 20)
.on("click", function() {
console.info(this.textContent)
})<script src = "https://d3js.org/d3.v5.min.js"></script>
<svg></svg>Однако, поскольку вы используете Выбор D3, а не узел SVG, вы должны использовать text в качестве геттера, то есть text(). Кстати, внутри text() используется textContent:
export default function(value) {
return arguments.length
? this.each(value == null
? textRemove : (typeof value === "function"
? textFunction
: textConstant)(value))
: this.node().textContent;
}
Наконец, вам не нужен этот блок if. Чтобы переключаться между 0 и 1, просто выполните:
this.textContent = 1 - (+this.textContent);
Вы даже можете отказаться от унарного плюса, так как строка все равно будет преобразована в число:
this.textContent = 1 - this.textContent;
Вот фрагмент:
var svg = d3.select("svg")
var txt1 = svg.append("text")
.text("0")
.attr("x", 10)
.attr("y", 20)
.on("click", function() {
this.textContent = 1 - (+this.textContent);
})<script src = "https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
чтобы получить ценность, вы должны вызвать
.text(), а не просто.text