我正在尝试让 D3plus 接受箱线图的非日期值并减少 bootstrap 中行之间的 space

Question

我有一个 SQL 数据库，我正在构建一个 webform/webservice 以使用 ASP.NET 提取数据并使用 D3plus 进行可视化。此外，我正在使用 bootstrap 来构建我的网络表单。我想有两行，并希望它们之间的白色 space 更少。此外，如果我使用年份以外的值（即字符串建筑物名称），则箱线图不起作用。我确信我只需要一个小的调整，但无法弄清楚。

我目前正在处理网络服务，非常感谢社区对网络表单的反馈。非常感谢您的宝贵时间！这是我的示例代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="vetWebform.aspx.cs" Inherits="vetApp.vetWebform" %>

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

<style>
    .row {
        font-size: 30px;
        padding-top: 10px;
        margin-bottom: 0px
}
</style>

</head>
<body>

<form id="form1" runat="server">
<div class="row">&emsp;Report from:&emsp;

   <asp:TextBox ID="TextBox3" runat="server" columns="6" style="border:1px solid #ff0000"></asp:TextBox>
   &emsp;To&emsp;
   <asp:TextBox ID="TextBox4" runat="server" columns="6" style="border:1px solid #ff0000"></asp:TextBox>

</div>
<div class="row">
    <div class="col-lg-6">
        <div id="viz"></div>
    </div>

     <div class="col-lg-6">
     <div id="exports"></div>
</div>

</div>

<script>
  var data = [
    {"building": "mmb", "name":"alpha", "value": 15},
    { "building": "mmb", "name": "alpha", "value": 34 },
    { "building": "ssb", "name": "alpha2", "value": 17 },
    { "building": "ssb", "name": "alpha2", "value": 65 },
    { "building": "ssb", "name": "beta", "value": 10 },
    { "building": "gcc", "name": "beta", "value": 10 },
    { "building": "gcc", "name": "beta2", "value": 40 },
    { "building": "mmb", "name": "beta2", "value": 38 },
    { "building": "lmd", "name": "gamma", "value": 5 },
    { "building": "lmd", "name": "gamma", "value": 10 },
    { "building": "mmb", "name": "gamma2", "value": 20 },
    { "building": "mmb", "name": "gamma2", "value": 34 },
    { "building": "ssb", "name": "delta", "value": 50 },
    { "building": "ssb", "name": "delta", "value": 43 },
    { "building": "gcc", "name": "delta2", "value": 17 },
    { "building": "gcc", "name": "delta2", "value": 35 }
  ]
  var visualization = d3plus.viz()
    .container("#viz")
    .data(data)
    .type("box")
    .id("name")
    .x("building")
    .y("value")
    .time(false)
    .height(400)
    .ui([{ 
        "label": "Visualization Type",
        "method": "type", 
        "value": ["scatter","box"]
      }])
    .draw()
</script>

<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")
    .height(400)
    .labels({ "align": "left", "valign": "top" })
    .draw()
</script>

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

截图如下：

Answer 1

我可以回答你的 bootstrap 问题，但你为 D3plus 箱线图发布的代码适用于当前版本 (v1.9.7)。

我正在尝试让 D3plus 接受箱线图的非日期值并减少 bootstrap 中行之间的 space

I am trying yo make D3plus accept non-date value for boxplot and reduce space between rows in bootstrap

html

d3.js

twitter-bootstrap

d3plus