Append D3 Element in Angular Directive

Question

Я очень новичок в d3.js и хочу преобразовать эту кодовую ручку: http://codepen.io/budelman/pen/NqZwpm Я нашел угловую директиву. Одна из проблем, с которыми я сталкиваюсь, заключается в том, что в угловой директиве я имею доступ только к одному «элементу». Я не могу понять, как добавить легенду текстового поля div # в мой угловой код.

Я пробовал:

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

Но это не работает. Может ли кто-нибудь указать мне в правильном направлении? Спасибо!

Answer 1

это то, что у вас есть в исходном коде,

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

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

означает, что вы просто нужно пустой DIV с идентификатором, а затем вставьте HTML в него. Я не уверен, почему вы пытаетесь добавить #textbox, а затем вставьте html. просто в вашей директиве. таким образом вы можете самостоятельно выбрать только с помощью d3

Answer 2

Я понял, насколько глупым этот вопрос был. Все, что мне нужно, чтобы добавить новый DIV к элементу, выполнив:

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