Bootstrap doesn't let me use data with other libraries

Question

I have a SQL database, and I am building a web service in visual studio for web. I am using bootstrap to structure my web form and using D3plus to visualize. I wrote the following test sample:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet"/>
    <script src="scripts/d3.js"></script>
    <script src="scripts/d3plus.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"})
    .draw()
</script>

</form>
</body>
</html>

Essentially, I want the graph to be in a container half the width of my screen. If I don't nest exports, the graph works. However, if I nest it, the data is not found. Am I making an obvious mistake? I would greatly appreciate the community's feedback. Thank you!

score 2 · Accepted Answer · answered Jun 05 '16 at 22:27

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>

Bootstrap doesn't let me use data with other libraries

1 Answers1