D3.js 使用d3转换的响应折线图_D3.js_Transition_Responsive

D3.js 使用d3转换的响应折线图

d3.js

D3.js 使用d3转换的响应折线图,d3.js,transition,responsive,D3.js,Transition,Responsive,我试图动画所附的代码没有成功。我希望轴和路径在添加新数据点之间平滑移动。过渡时间应为deltaT。我希望有人能帮助我！（我让它工作了，但只要图形没有响应，请参阅附加的js代码片段） index.html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Transfer setup rpi1 interface</title&g

我试图动画所附的代码没有成功。我希望轴和路径在添加新数据点之间平滑移动。过渡时间应为deltaT。我希望有人能帮助我！（我让它工作了，但只要图形没有响应，请参阅附加的js代码片段）

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Transfer setup rpi1 interface</title>
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
  <script src="jquery.flot.min.js"></script>
  <script src="jquery.flot.time.js"></script>
  <script src="//d3js.org/d3.v3.js" charset="utf-8"></script>
  <script type="text/javascript" src="main.js"></script>
</head>
<body>
  <div class="content">
  <header>
  <h1>Transfer Setup Rpi1</h1>
  </header>

  <div class="main">

  <h2>Control</h2>

      <fieldset>
        <legend>Temperature</legend>
        <div id="widthReader">
        <table id="cssTable">
            <tr>
                <td>

                <table id="cssTable">
                <td><label for="toggleFan">Fan</label></td>
                <td>
                <input id="toggleFan" class="cmn-toggle cmn-toggle-round" type="checkbox">
                <label for="toggleFan"></label>
                </td>
                </table>

                </td>

                <td>
                &nbsp;
                </td>
                <td>
                <label>Speed:</label> <input type="text"
                  id="fanSpeed" name="fanSpeed" value="">
                 </td>
             </tr>
             <tr>
                <td>

                <table id="cssTable">
                <td><label for="toggleHeater">Heater</label></td>
                <td>
                <input id="toggleHeater" class="cmn-toggle cmn-toggle-round" type="checkbox">
                <label for="toggleHeater"></label>
                </td>
                </table>

                </td>
                <td>
                &nbsp;
                </td>
                <td>
                <label>Setpoint:</label> <input type="text"
                  id="heaterTemp" name="heaterTemp" value="">
                </td>
            </tr>
        </table>

        </div>
      </fieldset>

             <button id="buttonSave">Save Settings</button>


    <h2>Dashboard</h2>
    <fieldset>
    <legend>Chart</legend>
        <label>Current Temperature:</label> <label id="heater_temperature">&nbsp;</label><label>°C</label>
        <div id="chart"></div>
     </fieldset>
</div>
  </div>
</body>
</html>

沃金js：

var transition = d3.select({}).transition()
    .duration(deltaT)
    .ease("linear");


function tick() {
    transition = transition.each(function () {

        // update the domains
        now = new Date();
        x.domain([now - (n-1) * duration, now ]);
        y.domain([0, (1.1*d3.max(data))]);


        // push a new data point onto the back
        data.push(Number($('#heater_temperature').text()));



        // slide the x-axis left, rescale the y-axis
        xAxisT.call(x.axisT);
        xAxisB.call(x.axisB);
        yAxisL.call(y.axisL);
        yAxisR.call(y.axisR);

        // redraw the line, and slide it to the left
        path.attr("d", line)
            .attr("transform", " translate( " + margin.left + " ," + margin.top+" )");

        // slide the line left
        path.transition()
            .attr("transform", "translate(" + (x(now - (n+0) * duration) + margin.left) + " ," + margin.top+ ")");

        // pop the old data point off the front
        data.shift();
    });
}

我让它工作了。。。问题是我开始使用d3.v3而不是d3.v2。以下是我所改变的：

function tick() {

  d3.transition().ease("linear").duration(deltaT-100).each(function() {
      // update the domains
      now = new Date(Date.now());
      markerScale.domain([now - (n-2)   * duration, now ]);
      xScale.domain([now - (n-2) * duration, now ]);
      yScale.domain([0, (1.1*d3.max(data))]);

      // slide the x-axis left, rescale the y-axis
      xAxisContT.transition().call(xAxisT);
      xAxisCont.transition().call(xAxis);
      yAxisCont.transition().call(yAxis);
      yAxisContR.transition().call(yAxisR);

      plot.attr("transform", null);

      // push a new data point onto the back
      data.push( Number($('#heater_temperature').text()) );
      path.attr("d", line);

      marker.data(data)
            .attr("cx", xValue)      
            .attr("cy", yValue)
            .attr("transform", null);

      // redraw the line and slide plot left
      plot.transition()
          .attr("transform", "translate(" + (xScale(now - (n-1) * duration) ) + " ,0)");

      // pop the old data point off the front
      data.shift();

      updateTextStyle();
  });
}

var transition = d3.select({}).transition()
    .duration(deltaT)
    .ease("linear");


function tick() {
    transition = transition.each(function () {

        // update the domains
        now = new Date();
        x.domain([now - (n-1) * duration, now ]);
        y.domain([0, (1.1*d3.max(data))]);


        // push a new data point onto the back
        data.push(Number($('#heater_temperature').text()));



        // slide the x-axis left, rescale the y-axis
        xAxisT.call(x.axisT);
        xAxisB.call(x.axisB);
        yAxisL.call(y.axisL);
        yAxisR.call(y.axisR);

        // redraw the line, and slide it to the left
        path.attr("d", line)
            .attr("transform", " translate( " + margin.left + " ," + margin.top+" )");

        // slide the line left
        path.transition()
            .attr("transform", "translate(" + (x(now - (n+0) * duration) + margin.left) + " ," + margin.top+ ")");

        // pop the old data point off the front
        data.shift();
    });
}

function tick() {

  d3.transition().ease("linear").duration(deltaT-100).each(function() {
      // update the domains
      now = new Date(Date.now());
      markerScale.domain([now - (n-2)   * duration, now ]);
      xScale.domain([now - (n-2) * duration, now ]);
      yScale.domain([0, (1.1*d3.max(data))]);

      // slide the x-axis left, rescale the y-axis
      xAxisContT.transition().call(xAxisT);
      xAxisCont.transition().call(xAxis);
      yAxisCont.transition().call(yAxis);
      yAxisContR.transition().call(yAxisR);

      plot.attr("transform", null);

      // push a new data point onto the back
      data.push( Number($('#heater_temperature').text()) );
      path.attr("d", line);

      marker.data(data)
            .attr("cx", xValue)      
            .attr("cy", yValue)
            .attr("transform", null);

      // redraw the line and slide plot left
      plot.transition()
          .attr("transform", "translate(" + (xScale(now - (n-1) * duration) ) + " ,0)");

      // pop the old data point off the front
      data.shift();

      updateTextStyle();
  });
}