score:1
Accepted answer
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.
Source: stackoverflow.com
Related Query
- d3.js/css: Positioning elements within div
- Positioning SVG elements via .getBoundingClientRect() in variable-width div
- Positioning multiple SVG elements in div HTML
- CSS padding property for svg elements
- Calculate Width of a DIV based on sibling count (not-fixed) using CSS or LESS
- Cannot click div when it overlays clickable d3 elements
- Using CSS Grid, scroll a div from anywhere (w/out using jQuery plugins)
- Positioning svg x/y coordinates with css not working with iOS devices?
- How can I contain elements of a D3 animation within a predefined container?
- How to append multiple child elements to a div in d3.js?
- add custom elements based on css styles not images to chart D3.js
- D3.js: How do you tilt/rotate individual text elements within a collection without rotating them all?
- D3 force layout with CSS positioning
- img and p within div using D3JS
- How to create elements (links) with 2 or more colors with CSS to make it look like a rainbow?
- Positioning nodes within locations in D3
- Transition all div elements with .tween at the same time with d3
- Unable to export c3.js charts with DIV elements
- Using CSS Scale/Matrix doesn't keep background aligned with elements
- Map elements in dataset to div id
- How to update data elements within a transition without deleting a re-creating everything?
- Finding width of div hidden by CSS
- To find nearest rect elements within specified radius or distance of another rect element using D3
- Combining two charts in one div - d3 / css
- Calculate coordinates of div elements using d3 and d3.tip
- Updating and Transitioning Individual SVG Elements Within a Group in D3.js
- unable to apply css styles to an svg image embedded in a div tag.?
- Positioning svg element over div
- Wrapping every five svg elements in a div with D3.js
- d3 Select and modify g elements within svg elements
More Query from same tag
- d3 force layout: highlight nodes in a group and their neighours
- OnClick() Handler for D3 using a Websocket
- d3 v4 tooltip passing data d issue
- Append text or circle in heatmap grid of d3js
- D3 v4 Zoom x-Axis Zooming and Panning Issue
- d3js onClick function can't access variable from superordinate function
- d3js scale, transform and translate
- XHR / Post Request using D3
- Update donut chart using the c3 library (JQuery)
- d3 xhr adding loading cursor
- D3.js Scale Tick Marks
- d3 tree - parents having same children
- Multiple points of Gravity in d3.js
- cal-heatmap - How to change text color based on rect .q1{} color?
- Getting same value from different select option
- n3-charts dynamically changing x-axis label for date
- Problems positioning nodes with d3.js force-layout. Nodes "re-entering" each data update, example inside
- Rendering geoJSON using D3 and Leaflet using imageOverlay
- Error: Property 'x' does not exist on type '[number, number]'
- d3js graph throwing Uncaught Type Error: Already checked with JsHint
- How to update reusable d3.js graph when data updates?
- How can I draw a line between rotate and non-rotate rectangle?
- How to match up scaleBand with scaleLinear in D3.js
- D3.JS - Line chart - responsive - can't find a way to update Line's x-values
- Create element "in memory", like jQuery does, in D3.js
- import js external file in angular 6
- Display an svg image on Google Chrome
- Can't access attr data in angular custom directive link function
- Click outside of Div to close it. SVG & D3, Angular
- d3.js data.columns doesn't exist?