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

问题

I have a SQL database, and I am building a webform/webservice to extract data using ASP.NET and visualizing with using D3plus. Moreover, I am using bootstrap to structure my webform. I am trying to have two rows, and would like less white space between them. Additionally, the boxplot doesn't work if I am using values other than year (i.e. string building names. I am sure that I only need a small tweak, but can't figure it out.

I am currently working on the webservice and would greatly appreciate the community's feedback on the webform. Thank you very much for your time! Here is my sample code:

<%@ 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>

Here is a screenshot:

回答1:

I can speak to your bootstrap question, but the code you posted for the D3plus box plot works for me in the current release (v1.9.7).

来源：https://stackoverflow.com/questions/37668770/i-am-trying-yo-make-d3plus-accept-non-date-value-for-boxplot-and-reduce-space-be

标签

html5

twitter-bootstrap

d3.js

d3plus