Ich habe eine SQL-Datenbank, und ich bin ein Webformular erstellen/Webservice, um Daten mit ASP.NET und Visualisierung mit D3plus zu extrahieren. Darüber hinaus benutze ich Bootstrap um mein Webformular zu strukturieren. Ich versuche zwei Reihen zu haben und möchte weniger Leerraum zwischen ihnen haben. Außerdem funktioniert der Boxplot nicht, wenn ich andere Werte als Jahr benutze (zB Stringbuilding-Namen. Ich bin mir sicher, dass ich nur eine kleine Optimierung brauche, aber nicht herausfinden kann.Ich versuche, D3plus akzeptieren Nicht-Datum Wert für Boxplot und reduzieren den Abstand zwischen den Zeilen im Bootstrap
Ich arbeite gerade an .! die Webservice und großen Einfluss auf das Feedback der Community auf dem Webformular schätzen würde Vielen Dank für Ihre Zeit ist hier mein Beispielcode:
<%@ 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"> Report from: 
<asp:TextBox ID="TextBox3" runat="server" columns="6" style="border:1px solid #ff0000"></asp:TextBox>
 To 
<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>
Hier ein Screenshot ist:
