将实时CSV数据输入D3图表

2024-09-27 00:13:46 发布

您现在位置：Python中文网/ 问答频道 /正文
3421 3

我有一个d3web应用程序，它显示包含一些服务器信息（吞吐量、ssl等）的图表

应用程序可以很好地处理静态数据，这是应该的。我设置了一个Python脚本来不断更新流量.csv包括当前数据（新数据每隔30秒追加一次，超过某个时间段的旧数据将被删除。）

我想知道将这些数据导入图表的最佳方法是什么。我试图将CSV数据“存储”为JavaScript变量，但D3无法解析它。在

我更喜欢一个方法，允许这个图形实时更新（或接近）。把我的Angu-JS的数据绑定到Angu-JS的实时数据绑定中。以前做过吗？在

这是我的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>

我希望我能找到一个单一的解决方案来导入这样的数据：

^{pr2}$

Tags： csv数据texthttpdatalabelsreturnvar
0条回答

目前没有回答

相关问题 更多 >

    编程相关推荐

    热门问题