D3 Examples - Posts with d3-component

Posts with d3-component

This example demonstrates basic usage of d3-component. Three components are created:

heading Renders an <h1> element and sets its text.

paragraph Renders a <p> element and sets its text.

post Renders a <div> element with a class of "post", and composes the heading and post components.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/d3@4"></script>
  <script src="https://unpkg.com/d3-component@3"></script>
  <style>
    #container{
      margin: 20px;
      padding: 20px;
      border-radius: 5px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    var heading = d3.component("h1")
          .render(function (selection,d){
            selection.text(d);
          }),
        paragraph = d3.component("p")
          .render(function (selection,d){
            selection.text(d);
          }),
        post = d3.component("div")
          .render(function (selection,d){
            selection
              .call(heading, d.title)
              .call(paragraph, d.content);
          });
​
    d3.select("#container").call(post, [
      {
        title: "The First Post",
        content: "Lorem ipsum dolor sit amet, et verear moderatius usu. Quando percipit menandri te mea, no pri semper omittam. At docendi facilisi indoctum pri. Simul vidisse dolores mei an, in pri insolens scripserit, tale iudico oporteat pro an. Ea decore epicuri partiendo est."
      },
      {
        title: "The Second Post",
        content: "Id nam unum iracundia reprimique, mel id probo constituam adversarium, elitr epicurei interesset ad usu. Iudicabit scriptorem ex pri, cu quis forensibus appellantur nam, usu ad putant assentior. Ea tamquam detraxit has, mei cu nostro expetendis moderatius. In inani dictas mei, per ut noster voluptatibus, vix ut nostro omnium."
      },
      {
        title: "The Third Post",
        content: "Mea te labore praesent, pro an democritum adolescens vituperata. Eum paulo sapientem theophrastus cu, at prima explicari qui, legere molestiae incorrupte at pro. Ei soluta docendi pro, te sea mentitum sensibus, eu vix solum nihil iudicabit. Vis ferri augue molestiae ei, eu veritus tacimates quo. Ex mel atomorum maiestatis scripserit. Ut reque justo sensibus pro, his vivendum intellegebat ex, timeam laoreet mei ei."
      },
    ]);
  </script>
</body>
    