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.


Related Query

More Query from same tag