How to add a click event or mouseover on dynamic elements ( enter/update/exit )?

276
March 20, 2017, at 1:57 PM

based on this example: Need another help to show up text on the screen dynamically

it is possible to let elements (for example a text) in D3.js appear and disappear with the help of the enter/update/exit rule.

 var texts = svg.selectAll(".texts")
        .data(data);
    textsExit = texts.exit().remove();
    textsEnter = texts.enter()
        .append("text")
        .attr("class", "texts");
    textsUpdate = texts.merge(textsEnter).attr("x", 10)
        .attr("y", (d, i) => 20 + i * 16)
        .text((d,i) => "Node " + (i+1) + ", name: " + d.name);

Now i want to add a click event or a mouseover on the appearing text elements. So i tried to add a mouseover first and changed the textsUpdatepart into:

     textsUpdate = texts.merge(textsEnter).attr("x", 10)
     .attr("y", (d, i) => 20 + i * 16)
      .text((d,i) => "Node " + (i+1) + ", name: " + d.name)
  .on("mouseover", function(d){ this.style.fill == "blue"});

The goal is that everytime when i move the mouse over the newly appereared elements, then they should turn blue. Unfortunally this did not worked well. Can someone help and give me a hint about the missing thing?

Thanks

Answer 1

You are stopping your access to textUpdate after you access .text(...) and before you access with .on(...). There is an extra semicolon before .on.

READ ALSO
The variable assigned is not globally changed after ajax success

The variable assigned is not globally changed after ajax success

In this page I have a table with paginationIn the pagination section, the '' with class "first" display the first page record, class "last" last page, class "next" display next following data

222
How can baidu Echarts allow multiple xAxis category data?

How can baidu Echarts allow multiple xAxis category data?

I'm trying to show multiple xAxis Category if I added more than two Category I can't able to see my result please look @ sample code I tried still can't fix itplease let me know if any alrternate way to do multiple xAxis Category?

580
How to highlight bunch of adjacent cells in a row containing single character per cell based on a pattern in R Shiny DT

How to highlight bunch of adjacent cells in a row containing single character per cell based on a pattern in R Shiny DT

This query is an extension to my earlier query in this forumBut, this time I have to process a sequence of characters in a row with each character in a cell as shown below in the image

286