Question

我有一个SQL数据库，我正在visual studio for web中构建一个Web服务。我正在使用bootstrap来构建我的Web表单并使用D3plus进行可视化。我写了以下测试样本：

<!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>

基本上，我希望图形位于屏幕宽度的一半的容器中。如果我不嵌套exports，图表就能正常工作。但是，如果我嵌套它，则找不到数据。我犯了一个明显的错误吗？我非常感谢社区的反馈。谢谢！

Answer 1

bootstrap col中的css最小高度为1px。 d3plus正在解析此高度，然后无法以1px呈现图表。您可以通过指定显式高度来解决此问题：

＆＃13;

<!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>

＆＃13;

Bootstrap不允许我使用其他库的数据

1 个答案: