我有一个d3网络应用程序，显示包含一些服务器信息的图表（吞吐量，ssl等）
该应用程序可以正常使用静态数据。我设置了一个Python脚本来不断更新我的traffic.csv以包含当前数据（每30秒追加一次新数据，并删除超过某个时间帧的旧数据。）
我想知道将这些数据导入我的图表的最佳方法是什么。我试图＆＃34;存储＆＃34;我的CSV数据作为JavaScript变量，但D3无法解析它。
我更喜欢一种允许此图表实时（或接近）更新的方法。我已经研究过将我的数据存储在AngularJS模型中并尝试将其绑定到d3图表以利用Angular的实时双向数据绑定。这是在以前完成的吗？
这是我的D3条形图代码： http://plnkr.co/edit/SclU3HYF7yCwZgHDOEHg?p=preview
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html ng-app="CSVReader">
<head>
<title>Bar Chart</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
<script src="controller.js"></script>
<!-- import main controller -->
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://d1e24pw9mnwsl8.cloudfront.net/c/bootstrap/css/bootstrap.min.css">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script src="controller.js"></script>
<!-- import main controller -->
</head>
<body ng-controller="MainCtrl">
<div id="title" style="text-align:center;padding-bottom:20px;">
<h1>Traffic Throughput (<a href="index2.html">in</a>) by Time</h1>
<small>Time in "Unix-Time", Throughput in Bytes</small>
</div>
<div id="chart" style="text-align:center"></div>
<script src="http://d3js.org/d3.v2.min.js"></script>
<script>
function renderChart() {
var data = d3.csv.parse(d3.select('#csv').text());
var valueLabelWidth = 50; // space reserved for value labels (right)
var barHeight = 20; // height of one bar
var barLabelWidth = 100; // space reserved for bar labels
var barLabelPadding = 5; // padding between bar and bar labels (left)
var gridLabelHeight = 18; // space reserved for gridline labels
var gridChartOffset = 3; // space between start of grid and first bar
var maxBarWidth = 420; // width of the bar with the max value
// accessor functions
var barLabel = function(d) {
return d['unixtime'];
};
var barValue = function(d) {
return parseFloat(d['tput_bytes_in']);
};
// scales
var yScale = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, data.length * barHeight]);
var y = function(d, i) {
return yScale(i);
};
var yText = function(d, i) {
return y(d, i) + yScale.rangeBand() / 2;
};
var x = d3.scale.linear().domain([0, d3.max(data, barValue)]).range([0, maxBarWidth]);
// svg container element
var chart = d3.select('#chart').append("svg")
.attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)
.attr('height', gridLabelHeight + gridChartOffset + data.length * barHeight);
// grid line labels
var gridContainer = chart.append('g')
.attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')');
gridContainer.selectAll("text").data(x.ticks(10)).enter().append("text")
.attr("x", x)
.attr("dy", -3)
.attr("text-anchor", "middle")
.text(String);
// vertical grid lines
gridContainer.selectAll("line").data(x.ticks(10)).enter().append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", 0)
.attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
.style("stroke", "#ccc");
// bar labels
var labelsContainer = chart.append('g')
.attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight + gridChartOffset) + ')');
labelsContainer.selectAll('text').data(data).enter().append('text')
.attr('y', yText)
.attr('stroke', 'none')
.attr('fill', 'black')
.attr("dy", ".35em") // vertical-align: middle
.attr('text-anchor', 'end')
.text(barLabel);
// bars
var barsContainer = chart.append('g')
.attr('transform', 'translate(' + barLabelWidth + ',' + (gridLabelHeight + gridChartOffset) + ')');
barsContainer.selectAll("rect").data(data).enter().append("rect")
.attr('y', y)
.attr('height', yScale.rangeBand())
.attr('width', function(d) {
return x(barValue(d));
})
.attr('stroke', 'white')
.attr('fill', 'green');
// bar value labels
barsContainer.selectAll("text").data(data).enter().append("text")
.attr("x", function(d) {
return x(barValue(d));
})
.attr("y", yText)
.attr("dx", 3) // padding-left
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "start") // text-align: right
.attr("fill", "blue")
.attr("stroke", "none")
.text(function(d) {
return d3.round(barValue(d), 2);
});
// start line
barsContainer.append("line")
.attr("y1", -gridChartOffset)
.attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
.style("stroke", "#000");
}
</script>
<script id="csv" type="text/csv">
// Data goes here until I can figure out how to link to the .csv
</script>
<script>
renderChart();
</script>
</body>
</html>
我希望我能找到一个用于导入这样的数据的单行解决方案：
var data = d3.csv.parse((traffic.csv).text());