Spans Example

Built with blockbuilder.org for mailing list discussion d3-js › Add class in .text().

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    
    .entry {
      font-size: 4em;
      line-height: 120px;
      margin-top: 30px;
      margin-left: 20px;
    }
    
    .entry-name {
      font-weight: bold;
    }
    
    .entry-value {
      font-style: italic;
    }
    
  </style>
</head>

<body>
  <script>
    
    var data = [
      { name: "Isaac Newton", value: "Scientist"},
      { name: "Leonardo DiCaprio", value: "Actor"},
      { name: "Leonardo DaVinci", value: "Awesomeness"},
    ];
    
    var entry = d3.select("body")
    	.selectAll("div")
      .data(data)
      .enter().append("div")
    		.attr("class", "entry");

entry.append("span")
    	.attr("class", "entry-name")
    	.text(function (d){ return d.name; });
    
    entry.append("span")
    	.text(" : ");
    
    entry.append("span")
    	.attr("class", "entry-value")
    	.text(function (d){ return d.value; });
    
  </script>
</body>

https://d3js.org/d3.v4.min.js