добавление div в другой div в D3 - PullRequest
Новая
       15

добавление div в другой div в D3

0 голосов
/ 28 сентября 2019

У меня есть всплывающие окна, которые я создал на карте D3, которые создаются при наведении курсора на определенные точки: 

//create the div!
var LeafletDiv = d3.select("body").append("div")   
        .attr("class", "county2014Tooltip")               
        .style("opacity", 0)

//add div to map on mouseover
var events = mapG.selectAll("circle")
    .data(allSFEvents)
    .enter().append("circle")
    .attr("class", 'events')
    .on("mouseover", function(d) { 
        var value2014 = currentMap.get(d.location);     
              LeafletDiv.transition()        
                 .duration(200)      
                .style("opacity", .9);

              LeafletDiv .html('<br/>' + "<img src='"+d.ArtistImage+"''width='300px' height = '150px'>" + '<br/>'+ '<b>'+d.Address+'</b>' + '<br/>'+d.Artist
                + '<br/>'+d.Date + '<br/>' +d.Venue +'<br/>' + d.OtherInfo + '<br/>' +d.Genre +'<br/>'+ d.ArtistImage +'<br/>' +d.ArtistBio
                )

Все это прекрасно работает, но проблема в том, что я хотел бы сделатьнемного больше форматирования для поп-листа LeafletDiv и поместите в него отдельные элементы div, чтобы лучше организовать информацию во всплывающем окне.Я попытался добавить div к LeafletDiv, используя: 

LeafletDiv.append("div")
       .attr("class", "child_div")
       .style("background-color","#C8DAF8")
       .style("stroke-width", "4px")

Пока ничего не отображается.Мой подход здесь неправильный?Заранее спасибо.

...