Блог

Итак, у меня есть набор объектов d3 (объекты JS), которые хранят некоторый введенный пользователем текст и сохраняют его в определенном объекте d3, на который был нажат. Я вызываю getNotesBox() функцию каждый раз, когда нажимается этот конкретный объект.

Вот логика, которую я реализовал для отображения текстового поля, получения пользовательского ввода и сохранения его в определенном объекте d3 в фокусе.

 function getNotesBox(d, node) {
  // console.log(d);

  console.log(d)
  let tbox = $("#tbox")[0]
  if(tbox.classList.value === "selected"){
    d3.selectAll('circle')._groups[0].forEach(element => {
      element.classList.remove('context')
    });
      d3.select("#tbox").node().classList.remove('selected')

  }

  var thisCircle = node;
  d3.select(thisCircle).select('circle').node().classList.add('context')
  d3.event.preventDefault();
  d3.select("#tbox").node().classList.add('selected')
  let notesText = $("#notes")
  notesText[0].innerHTML = d.name
  // notesText.on('blur', function() {
  //   console.log(notesText[0].innerHTML);

  //   // d3.select(node).select("text").text(d.name);
  //   // d.name = notesText[0].innerHTML 
  //   console.log(d);
  //   // d3.select(thisCircle).node().__data__.name = notesText[0].innerHTML;
  //   restart();
  // })
  d3.select("textarea").node().value = d.notes || "";

  $('#textarea').on('input', function() {
    local.set(thisCircle, d3.select("textarea").node().value)
    d.notes = d3.select("textarea").node().value;
    // console.log(d.notes);
  })
  $("#close").on("click", function() {
    console.log(d.notes);
    d3.select("#tbox").node().classList.remove('selected')
    d3.select(thisCircle).select('circle').node().classList.remove('context')

  })
}
 

Хотя это, кажется, отлично работает, когда я щелкаю по объекту, вводю текст и закрываю его, кажется, что эффект укладки возникает при щелчке по объекту, вводе текста и щелчке по следующему объекту (эффект укладки).

Хотя я уверен, что это должно как-то повлиять на возвращаемое значение функции (граничное условие). Текущее поведение-это входной текст, применяемый не только к текущему объекту, на который был сделан щелчок, но и к предыдущему объекту, на который был сделан щелчок в стеке.