将HTML代码添加到D3文本

Question

I'm trying to add a link to my string using D3. I am building a list, but I also want to offer the possibility to remove items from that list. This is the code:

            for (i in comparison) {
            var t = d3.select("#comparison")
                    .select("ul")
                    .append("li")
                    .text('<a onClick="removeItemComparison(' + i + ')">[X]</a> | ' + comparison[i].properties.BCNAAM);
                  }

However, instead of showing a clickable link, the code is added as a string.

I've tried searching, but I'm not sure what search terms to use. Thanks in advance!

Answer 1

To add html code to a selection, use selection.html(). See also https://github.com/mbostock/d3/wiki/Selections#html

Answer 2

What you are probably looking for is the selection.on() method. You can use this method to assign event listeners to your items, which can then handle the removal for you.

So, instead of...

.text('<a onClick="removeItemComparison(' + i + ')">[X]</a> | ' + comparison[i].properties.BCNAAM);

You would do something closer to...

.on('click', function(i) { ...doStuffHere })

The API Reference page that contains the details of the on() method can be found here, https://github.com/mbostock/d3/wiki/Selections#on

I have not found myself needing to insert html text directly into my D3 code before, so I cannot provide much assistance on that front.

I hope that helps!