d3.js / css：div中的定位元素

Question

I've created a line chart in d3.js with a panel at the bottom (a div outside of the chart) with certain elements like text and img within individual groups. The problem I'm having is positioning these elements within each group and they just seem to go after each other:

How would I, for instance, have them looking like I did previously but for an external div? Would I be looking to use CSS formatting?

(This is how I had them looking previously, which is what I'm sort of looking for)

Also, this is the code I have for appending each element to their respective groups:

for(item in tweet_list) {
            var tweet = tweet_list[item];

            d3.select(".panel")
                .append("g")
                .attr("id", function(){return "p"+tweet['id_str'];})
                .attr("position", "absolute")
                .style("display", "block")
                .classed("panel-body", true);

            var group = d3.selectAll("#p"+tweet['id_str']+"");

            group.append("text")
                .text(function(){
                    var tweet_created_format = d3.timeFormat("%-I:%M%p, %e %b %Y")(d3.timeParse("%a %b %d %H:%M:%S %Z %Y")(tweet['created_at']));
                    return "@"+tweet['user']['screen_name']+"    ("+tweet_created_format+")";
                });

            group.append("img")
                .attr("width", 20)
                .attr("height", 20)
                .attr("src", function(d){return tweet['user']['profile_image_url']});

            group.append("text")
                .text(function(){
                    return tweet['text'];
                });

            group.append("img")
                .attr("src", "{{ url_for('static', filename = 'img/twitter-like.svg') }}");
            group.append("img")
                .attr("src", "{{ url_for('static', filename = 'img/twitter-retweet.svg') }}");

            group.append("text")
                .text(function(){
                    return tweet['retweet_count'];
                });
            group.append("text")
                .text(function(){
                    return tweet['favorite_count'];
                });
        }

Answer 1

You will definitely need to use css to style the tweets. Also one should not mix svg and html elements eg. append 'g' to a 'div'. Finally in d3 you can (and should) bind data to selections instead of looping manually.
What you want is something like this:

var tweetDivs = d3.select(".panel").selectAll('div.panel-body')
            .data(tweet_list)
            .enter()
            .append("div")
            .attr("id", function(d){return "p"+d['id_str'];})
            .classed("panel-body", true);


          tweetDivs.append("img")
            .attr("width", 20)
            .attr("height", 20)
            .attr("src", function(d){return d['user']['profile_image_url']})
            .attr('style', 'display: inline-block;')

          tweetDivs.append("p")
            .text(function(d){

                return "@"+d['user']['screen_name'];//+"    ("+tweet_created_format+")";
            })              
            .attr('style', 'display: inline-block;')

        tweetDivs.append("p")
            .text(function(d){
                return d['text'];
            })


        tweetDivs.append("img")
            .attr("src", "{{ url_for('static', filename = 'img/twitter-like.svg') }}");
        tweetDivs.append("img")
            .attr("src", "{{ url_for('static', filename = 'img/twitter-retweet.svg') }}");

        tweetDivs.append("p")
            .text(function(d){
                return d['retweet_count'];
            });
        tweetDivs.append("p")
            .text(function(d){
                return d['favorite_count'];
            });

EDIT: Fixed invisible reference to html and svg tags.