Append D3 Element in Angular Directive

Question

I'm very new to d3.js and want to convert this code-pen: http://codepen.io/budelman/pen/NqZwpm I found to an angular directive. One problem I'm facing is that in angular directive, I only have access to one "element". I can't figure out how to append the div#textbox legend in my angular code.

I tried:

// Shove the text into the div with ID #textbox            
svg.append('div')
.attr('id','textbox')
.select("#textbox")
.text(string);
})

But it doesn't work. Can someone please point me to the right direction? Thank you!

Answer 1

this is what you have in the original code,

.on("mouseover", function(d) {
            //some code

            // Shove the text into the div with ID #textbox
            d3.select("#textbox")
                .html("")
                .append("text")
                .html(string);
        })

which means you just need an empty div with an id and then insert html into it. I am not sure why you are trying to append the #textbox first then insert html. just have the in your directive. that way you can independently just select with d3

Answer 2

I realized how silly this question was. All I needed is to append a new div to the element by doing:

d3.select(element[0]).append("div").attr("id","textbox");