У меня есть база данных SQL, и я создаю веб-форму/веб-сервис для извлечения данных с помощью ASP.NET и визуализации с помощью D3plus. Более того, я использую bootstrap для структурирования своей веб-формы. Я пытаюсь иметь две строки и хотел бы, чтобы между ними было меньше пробелов. Кроме того, ящичковая диаграмма не работает, если я использую значения, отличные от года (т.е. имена строковых зданий. Я уверен, что мне нужна только небольшая настройка, но я не могу понять это.
В настоящее время я работаю над веб-сервисом и был бы очень признателен сообществу за отзывы о веб-форме. Спасибо вам большое за ваше время! Вот мой пример кода:
<%@ 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>
Вот скриншот:
