score:-1
i'm also working through the lynda.com course. here's an example of the "binding data to the dom" exercise using d3 version 4: jsfiddle
html:
<!--
added these two scripts:
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
-->
<div class="container">
<h2>d3 graphic</h2>
<section id="chart">
<div class="item">darth vader</div>
<div class="item">luke skywalker</div>
<div class="item">han solo</div>
<div class="item">obi-wan kenobi</div>
<div class="item">chewbacca</div>
<div class="item">boba fett</div>
</section>
</div>
js:
var mystyles = [{
width: 200,
color: '#a57706'
}, {
width: 300,
color: '#bd3613'
}, {
width: 150,
color: '#d11c24'
}, {
width: 350,
color: '#c61c6f'
}, {
width: 400,
color: '#595ab7'
}, {
width: 250,
color: '#2176c7'
}];
d3.selectall('.item')
.data(mystyles)
.styles({
'color': 'white',
'background': function(d) {
return d.color;
},
width: function(d) {
return d.width + 'px';
}
})
score:5
you can apply objects in styles and attributes by using d3-selection-multi
.
first, you have to reference the mini library:
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
then, you have to use styles
, not style
:
.styles({'color':'white','background':function(d){return d}});
you can see the code working in this fiddle, in which i'm using an object to set the styles
: https://jsfiddle.net/gerardofurtado/o54rtrqc/1/
for attributes, use attrs
instead of attr
.
here is the api.
Source: stackoverflow.com
Related Query
- D3: passing object in style method is not working
- style method does not take object
- d3.select method not working
- d3 js enter method not working
- Horizontal bar chart exit method not working
- Why is my method not recognizing my object member?
- D3js arc animation not working when wrapping in object
- D3 .remove() method not working when chained with transitions
- D3.JS ticks method not working on x-axis that is using dates
- D3 Object Constancy not working with key function. Enter and Update contain all elements every time
- width attribute not working with d3 style
- Changing "fill" style on axis tick labels not working (d3.js)
- D3 Each Method Not Working as Expected
- Sorting method in d3js not working
- d3.js transition is not working with property method
- font size is not working in my d3.js code
- d3.select("#element") not working when code above the html element
- Title Attribute not working for an SVG Rect on Safari
- d3.js - mouseover event not working properly on svg group
- D3 - Positioning tooltip on SVG element not working
- D3 Bar Graph example not working locally
- d3.js transition() not working when browser is minimised
- d3 transition for transform translate not working for DIV
- $location not working in AngularJS using d3.js
- Exit not working properly
- Simplest D3.js example not working
- Angular 4 + D3v4 : dragging circle not working correctly in conjunction with zooming
- D3 function to parse the date not working
- d3 zoom not working as in example
- d3.select is not working with special Characters
More Query from same tag
- D3 Undefined Attribute in Tooltip
- marker size uniform in d3
- Javascript: Access slider value
- Shorten SVG path arc by pixel
- add a sub element in d3js using data binding
- Same color is showing in different arc of d3 pie chart
- Why do the y axis values shift up from real point in line chart?
- D3 bar graph looking different when using numbers array and json elements array
- How to add images to c3.js generated charts
- Get bounding box of individual countries from topojson
- Can't Parse JSON Date from SQL Server in Javascript
- What is the difference between these two code blocks in d3.js
- How to bring foreignObject elements in SVG to the top layer?
- D3 Force-directed graph using texts instead of nodes
- Timeseries line-chart in dc.js - time Dimension not working
- How to update handle location on slider of D3js dynamic chart?
- Rendering D3.js within an Ampersand.js app using Jade
- force directed graph change color of all connected node on mouseover
- How to update D3.js bubble chart with real-time JSON data?
- d3.js set with attribute in percent rather than pixels
- Adding connectors on mouse over similar to draw.io
- How to change sizing of D3 axis?
- 404 error trying to parse csv with javascript/D3
- Displaying d3 chart in django
- Horizontal d3 tree: how to have root starting at top left instead of middle y-axis?
- Random horizontal line showing in d3 line chart?
- use d3 to create neo4j node tooltip
- D3: Panning along date x axis
- d3 click event handle(object)
- Can the 'webagg' backend for matplotlib work with my django site?