score:2

Accepted answer

the css in the bootstrap col has a min-height of 1px. d3plus is parsing this height out and then failing to render the chart in 1px. you can fix this by specifying as explicit height:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">

  <head runat="server">
    <title></title>
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script src="https://rawgit.com/alexandersimoes/d3plus/master/d3plus.full.js"></script>
  </head>

  <body>
    <form id="form1" runat="server">
      
      <div class="col-lg-6">
        <div id="exports"></div>
      </div>

  <script>
  // sample data array
  var trade_data = [
    {"usd": 34590873460, "product": "oil"},
    {"usd": 12897429187, "product": "cars"},
    {"usd": 8974520985, "product": "airplanes"},
    {"usd": 9872342, "product": "apples"},
    {"usd": 6897234098, "product": "shoes"},
    {"usd": 590834587, "product": "glass"},
    {"usd": 987234261, "product": "horses"}
  ]
  // instantiate d3plus
  var visualization = d3plus.viz()
    .container("#exports")
    .data(trade_data)
    .type("tree_map")
    .id("product")
    .size("usd")
    .labels({"align": "left", "valign": "top"})
    .height(250) //<-- explicit height
    .draw()
      </script>
        </form>
  </body>

</html>


Related Query