将动态数据添加到D3图表时遇到问题。在调试器中，我可以看到来自C＃的数据正在使用javascript。我已经尝试了几种方法将数据加载到D3 data.items变量，但没有一个工作。有人可以帮忙吗？这是我的代码：
ASPX：
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master"
AutoEventWireup="true" CodeBehind="D4.aspx.cs" Inherits="PP.D4" %>
<asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<!DOCTYPE html>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600,200italic,600italic&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
<script src="http://phuonghuynh.github.io/js/bower_components/jquery/dist/jquery.min.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/d3/d3.min.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/d3-transform/src/d3-transform.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/extarray.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/misc.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/micro-observer.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/microplugin/src/microplugin.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/bubble-chart.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js"></script>
<script src="BC.js"></script>
<style>
.bubbleChart {
min-width: 100px;
max-width: 700px;
height: 700px;
margin: 0 auto;
}
.bubbleChart svg{
background: #000000;
}
</style>
<div class="bubbleChart"/>
</asp:Content>
BC.js
$(document).ready(function () {
var bubbleChart = new d3.svg.BubbleChart({
supportResponsive: true,
size: 600,
innerRadius: 600 / 3.5,
radiusMin: 50,
data: {
items: [
{ text: "aaa", count: "236" },
{ text: "bbb", count: "382" },
{ text: "ccc", count: "170" },
{ text: "ddd", count: "123" },
{ text: "eee", count: "12" },
{ text: "fff", count: "170" },
{ text: "ggg", count: "382" },
{ text: "hhh", count: "10" },
{ text: "iii", count: "170" },
],
eval: function (item) { return item.count; },
classed: function (item) { return item.text.split(" ").join(""); }
},
plugins: [
{
name: "central-click",
options: {
text: "(See more detail)",
style: {
"font-size": "12px",
"font-style": "italic",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
"fill": "white"
},
attr: { dy: "65px" },
centralClick: function () {
alert("Here is more details!!");
}
}
},
{
name: "lines",
options: {
format: [
{// Line #0
textField: "count",
classed: { count: true },
style: {
"font-size": "28px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "0px",
x: function (d) { return d.cx; },
y: function (d) { return d.cy; }
}
},
{// Line #1
textField: "text",
classed: { text: true },
style: {
"font-size": "14px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "20px",
x: function (d) { return d.cx; },
y: function (d) { return d.cy; }
}
}
],
centralFormat: [
{// Line #0
style: { "font-size": "50px" },
attr: {}
},
{// Line #1
style: { "font-size": "30px" },
attr: { dy: "40px" }
}
]
}
}]
});
});
//LOAD DATA
var uri = 'api/testing';
$(document).ready(function () {
// Send an AJAX request
$.getJSON(uri)
.done(function (data) {
// On success, 'data' contains a list of tests.
$.each(data, function (key, item) {
$({ text: formatItem(item) }).appendTo($('#data.items'));
});
});
});
function formatItem(item) {
return 'text:' + item.text + ', count:' + item.count;
}
TestingController.cs
using PP.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web.Http;
namespace PP.Controllers
{
public class TestingController : ApiController
{
Testing[] testings = new Testing[]
{
new Testing { Id = 1, text = "AAA", count = 12},
new Testing { Id = 2, text = "BBB", count = 2},
new Testing { Id = 1, text = "CCC", count = 27},
new Testing { Id = 1, text = "DDD", count = 50},
new Testing { Id = 1, text = "EEE", count = 4},
new Testing { Id = 1, text = "FFF", count = 32}
};
public IEnumerable<Testing> GetAllProducts()
{
return testings;
}
public IHttpActionResult GetProduct(int id)
{
var testing = testings.FirstOrDefault((p) => p.Id == id);
if (testing == null)
{
return NotFound();
}
return Ok(testing);
}
}
}
Testing.cs（模型）
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace PP.Models
{
public class Testing
{
public int Id { get; set; }
public string text { get; set; }
// public string Category { get; set; }
public int count { get; set; }
}
}