D3.select не работает?
Я использую d3, пытаясь изменить свойства в графе c3, единственный способ обнаружить элемент - это его свойство css: "text.c3-chart-arcs-title". На странице есть два элемента со свойством css, и функция вызывается 2 раза, чтобы добраться до обоих элементов. Мой код:
if (d3.select("text.c3-chart-arcs-title")){
let vari = d3.select("text.c3-chart-arcs-title");
console.info("got here");
vari.attr("id", "title" + name); //name is a variable that must be different between both elements
vari.attr("class", "substitute"); //I replace the css to be able to get to the second graph
}
Однако только первый элемент затронут моим изменением, второй - нет, хотя я дважды «попал сюда», что означает обнаружение второго элемента.
Примечание. Я буду использовать эти два компонента позже, используя:
$("#title" + name).css('cursor', 'pointer')
.click(function () {
//function using variables of each component 1 and 2 previously selected
}
});
Подскажите, пожалуйста, что я сделал не так и как получить доступ ко второму элементу? Спасибо за помощь,
@GerardoFurtado Спасибо за ваш ответ, однако я не могу использовать SelectAll, так как мне нужны разные имена для идентификатора (который я использую впоследствии), а имя зависит от параметров, вызываемых в функции (которую я вызываю дважды). У меня вопрос: класс "text.c3-chart-arcs-title" заменен классом "substitute", поэтому логически он не будет обнаружен во второй раз.
Для правильной помощи отправьте сообщение минимальный воспроизводимый пример. Если это функция, которую вы вызываете дважды (это не совсем ясно в вашем коде), она изменит класс обоих элементов: jsfiddle.net/c5yqop10
@GerardoFurtado Я добавил другой код (я не ставил его раньше, потому что он не имеет отношения к проблеме). да, я не против изменить оба класса. Мне нужно: 1 / определить первый элемент и дать ему идентификатор, который будет обнаружен позже для функции. 2 / Затем второй раз обнаруживаем второй элемент, назначаем другой идентификатор и выполняем обработку для второго элемента.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если я правильно понимаю, у вас есть некоторые уже существующие элементы, которые имеют один и тот же класс и надеются назначить им новые идентификаторы на основе их порядка в DOM.
У вас есть только два элемента, но по сути вы выполняете цикл для выбора каждого элемента по отдельности. На самом деле это не «способ d3», циклы не нужны для многих общих задач с d3.
Выберем сразу все диаграммы и назначим новые свойства сразу всем элементам. Это можно сделать двумя способами:
- назначить новый идентификатор на основе индекса каждого элемента
- назначить новый идентификатор на основе данных, которые мы привязываем к выбранным элементам
Первый метод довольно прост:
// select all charts and give them an id based on their index:
d3.selectAll(".chart")
.attr("id", function(d,i) { return "Chart"+i; });
// adding buttons for demonstration:
d3.select("body").selectAll(null)
.data([0,1,2])
.enter()
.append("p")
.style("cursor","pointer")
.text(function(d) { return "Chart:" + d; })
.on("click", function(d) {
d3.selectAll(".chart")
.style("background-color","white");
d3.select("#Chart"+d)
.style("background-color","yellow");
});.chart {
padding: 20px;
display: inline-block;
border: 1px dotted #ccc;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<div class = "chart">This is Chart 1</div>
<div class = "chart">This is Chart 2</div>
<div class = "chart">This is Chart 3</div>
<p> Select a div: </p>Но таков и второй метод, который также позволяет вам легко указывать конкретные имена для ваших диаграмм:
// deterimne some id's beforehand
var names = ["Chart1","Chart2","Chart3"];
// select all charts and bind the id array to it
// then set the id of each chart based on the bound data:
d3.selectAll(".chart")
.data(names)
.attr("id", function(d) { return d; });
// and buttons for demonstration:
d3.select("body").selectAll(null)
.data(names)
.enter()
.append("p")
.style("cursor","pointer")
.text(function(d) { return d; })
.on("click", function(d) {
d3.selectAll(".chart")
.style("background-color","white");
d3.select("#"+d)
.style("background-color","yellow");
});.chart {
padding: 20px;
display: inline-block;
border: 1px dotted #ccc;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<div class = "chart">This is Chart 1</div>
<div class = "chart">This is Chart 2</div>
<div class = "chart">This is Chart 3</div>
<p> Select a div: </p>Ваш подход может работать, он поверхностно модифицирован ниже (что делает проблему, заявленную в вопросе, невоспроизводимой, но это немного проблема x, y, поскольку ваша проблема, вероятно, действительно заключается в том, как достичь результата ("как получить доступ ко второму элементу"), а не что неверен с кодом), но выбранный вами подход немного выходит за рамки обычного подхода d3. Вот ваш код, работающий по назначению:
var names = ["chart2","chart1"]
function test() {
if (d3.select(".chart")){
let vari = d3.select(".chart");
console.info("got here");
vari.attr("id", names.pop());
vari.attr("class", "substitute"); //I replace the css to be able to get to the second graph
}
}
test();
test();
d3.select("#chart1")
.style("border","1px solid black");
d3.select("#chart2")
.style("background-color","#ccc");<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<div class = "chart">Chart 1</div>
<div class = "chart">Chart 2</div>По моему скромному мнению, это проблема XY, которая будет разворачиваться вечно .... Но давайте посмотрим, что произойдет.
@GerardoFurtado, да, не знаю, почему я застрахован от этого, это проблема xy. Неканонический подход в вопросе слишком сильно на меня повлиял, и мне пришлось выбросить альтернативный путь к цели.
спасибо @AndrewReid за ответ, я обнаружил, что с моим кодом все в порядке, в итоге я использовал SelectAll
selectAll: jsfiddle.net/vhxrou8o