Question

我有一个实时D3折线图，我尝试使用jQuery UI滑块进行实时缩放。将X轴缩放为特定的。这是一个codepen，最后也是一个片段。图表在这里滚动随机数据，看看：

我真的有两个问题：

1）当移动滑块时，X轴本身会按照我想要的方式缩放。但是绘制的实际线条无法正确缩放。我在这里做错了什么？

2）当该特定浏览器标签（或窗口中只有一个标签）变为非活动状态时，页面在返回标签时无响应。例如，如果用户使用另一个选项卡浏览了几分钟，则带有图表的整个选项卡将无响应，并且仅在漫长的等待后才会再次响应。用D3进行这种实时制图，我该如何处理整个背景？你可以自己复制一下。

专注于JS。 HTML就像CSS一样简单，就像这个例子一样。

＆＃13;

// D3 CHART
random = d3.random.normal(0, .3);

var n = 500,
  duration = 50,
  now = new Date(Date.now() - duration),
  data = d3.range(n).map(random);

var margin = 40;

// get height from element attributes, otherwise set default
var height = 300 - margin * 2;
var width = $('.panel').width() - margin * 2;

var x = d3.time.scale()
  .domain([now - (n - 2) * duration, now - duration])
  .range([0, width]);

var y = d3.scale.linear()
  .domain([-1, 1])
  .range([height, 0]);

var line = d3.svg.line()
  .interpolate("basis")
  .x(function(d, i) {
    return x(now - (n - 1 - i) * duration);
  })
  .y(function(d, i) {
    return y(d);
  });

var svg = d3.select("#chart").append("svg")
  .attr("width", width + margin + margin)
  .attr("height", height + margin + margin)
  .append("g")
  .attr("transform", "translate(" + margin + "," + margin + ")");

svg.append("defs").append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("width", width)
  .attr("height", height);

var yAxis = svg.append("g")
  .attr("class", "y axis")
  .call(y.axis = d3.svg.axis().scale(y).ticks(5).orient("left"));

var xAxis = svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(x.axis = d3.svg.axis().scale(x).orient("bottom"));

var path = svg.append("g")
  .attr("clip-path", "url(#clip)")
  .append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line);

var transition = d3.select({}).transition()
  .duration(duration)
  .ease("linear");


(function tick() {

  transition = transition.each(function() {

    // update the domains
    now = new Date();
    x.domain([now - (n - 2) * duration, now - duration]);

    // push a new data point
    data.push(random());

    // redraw the line, and then slide it to the left
    path
      .attr("d", line)
      .transition()
      .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")");

    xAxis.call(x.axis);

    // pop the old data point off the front
    data.shift();

  }).transition().each("start", tick);
})();



// X axis range slider
$(document).ready(function() {
  $(function() {
    var graph = d3.select("#chart");

    $("#slider").slider({
      range: "min",
      value: 750,
      min: 200,
      max: 2000,
      slide: function(event, ui) {
        old_n = n;
        n = ui.value;

        // update the domains
        now = new Date();
        x.domain([now - (n - 2) * duration, now - duration]);

        path
          .attr("d", line)
          .transition()
          .attr("transform", "translate(" + x(n - old_n) + ")");
      }
    });
  });
});

＆＃13;

body {
  font-family: sans-serif;
  padding: 20px;
}
.panel {
  width: 600px;
}
.axis path,
.axis line {
  shape-rendering: crispEdges;
}
.line,
line,
path {
  fill: none;
  stroke-width: 1;
  stroke: #000;
}
.slider {
  max-width: 300px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="panel panel-default">
  <div class="panel-heading">Chart</div>
  <div class="panel-body">
    <div id="chart"></div>
  </div>
  <div class="panel-footer">
    <div id="slider"></div>
  </div>
</div>

＆＃13;

使用滑块缩放实时D3折线图

0 个答案: