About A My project ERROR
Recently I was coding a project about visualization based on the city public utility with D3.js. I hope to draw the label text on my infographic and add a click event on it, so I write down a sentence--
.on("click",function(){...}
However, it did not work after several checks. So I was thinking if there is something or some blocks above my text to cause no response. After adding the code
.style('z-index','1000000')
to promote the layer the text lies on, I clicked the text again, but no miracle appeared. What's wrong with the text, and i was crazy about it. The worse thing was that there is nothing about no clicking event on text when i searched in the Internet.
Luckily, I opened the element checking window to see the text attributes, and focused on some words--
~~pointer-events: auto;~~
I was crazy again! The words mean no pointer events exist. This attribute was decleared in the globle area at the front of the project, so I just forgot it. The last thing is adding a few words in my project
.style('pointer-events','auto')
As a programmer, it is common that there will be a bug in a running code. Sometimes a little bug is difficult to catch. Because it stays where you can't think of. But, interestingly, when we find out the problem is, we mostly say,"what a stupid bug, how can I make this low-level bug!" instead of "Wow, I am so happy to find the bug is!" So paying attention to the details is very important for a programmer!