繁体 English 中英

在d3.js中创建实时折线图

[英]Create live line chart in d3.js

原文 2017-11-29 15:53:49 9 0 javascript/ html/ d3.js/ charts

我正在尝试在d3.js上创建实时折线图，并在x轴上按序缩放。

我创建了一个图表，但无法弄清楚如何移动它。 我尝试了不同的方法，但仍然无法使其移动。 因此，在使这些行移动时，我需要帮助。

我想创建一个这样的（第一个）： https : //bost.ocks.org/mike/path/

这是我到目前为止的内容：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>D3: Axes</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">
        body {
            background-color: #ccc;
        }

        svg {
            background-color: white;
        }

        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }

        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
    </style>
</head>

<body>

    <div id="chart1"></div>
    <div id="chart2"></div>

    <script type="text/javascript">

        //Width, height, padding
        var w = 600;
        var h = 300;
        var padding = 50;

        var xValue = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m"];

        //Dynamic, random dataset
        var dataset = [];                                           //Initialize empty array
        var numDataPoints = 13;                                     //Number of dummy data points to create
        var maxRange = Math.random() * 0.01;                        //Max range of new values
        for (var i = 0; i < numDataPoints; i++) {                   //Loop numDataPoints times
            var newNumber1 = Math.cos(i) * 0.001;   //New random integer
            var newNumber2 = Math.sin(i) * 0.001;   //New random integer
            dataset.push([xValue[i], newNumber1, newNumber2]);                  //Add new number to array
        }


        //Configure x and y scale functions
        var xScale = d3.scale.ordinal().domain(xValue).rangeRoundBands([padding, w - padding]);
        var yScale = d3.scale.linear()
            .domain([-0.0010, 0.0010])
            .range([h - padding, padding]);



        //Define X axis
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .ticks(13);



        //Define Y axis
        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left")
            .ticks(10);

        //Create SVG element
        var svg = d3.select("#chart1")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

        //Create circles
        var circles = svg.append("g")
                    .attr("id", "circles")`enter code here`
                    .selectAll("circle")
                    .data(dataset)
                    .enter()
                    .append("circle")
                    .attr("cx", function (d) {
                        return xScale(d[0]);
                    })
                    .attr("cy", function (d) {
                        return yScale(d[1]);
                    })
                    .attr("r", 8)
                    .attr("fill", "red")
                    .attr("stroke", "black")
                    .attr("stroke-width", 2);


        //Create X axis
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + (h) / 2 + ")")
            .call(xAxis);

        //Create Y axis
        svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + (padding) + ",0)")
            .call(yAxis);


        // //Create Line Path
        // svg.append("path")
        //  .datum(dataset)
        //  .attr("class", "line");



        // Define Line Elements
        var line = d3.svg.line()
            .x(function (d) { return xScale(d[0]); })
            .y(function (d) {
                return yScale(d[1]);
            })
            .interpolate("linear");

        //The line SVG Path we draw
        var lineGraph = svg.append("path")
            .attr("d", line(dataset))
            .attr("stroke", "green").attr("stroke-width", 2)
            .attr("fill", "none");

        //--------------------------------------------------------//-------------------------------------------------------------//-----------------------------------------//


        //Create SVG element
        var svg2 = d3.select("#chart2")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

        //Create circles
        var circles = svg2.append("g")
            .attr("id", "circles")
            .selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle")
            .attr("cx", function (d) {
                return xScale(d[0]);
            })
            .attr("cy", function (d) {
                return yScale(d[2]);
            })
            .attr("r", 8)
            .attr("fill", "green")
            .attr("stroke", "black")
            .attr("stroke-width", 2);

        //Create X axis
        svg2.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + (h) / 2 + ")")
            .call(xAxis);

        //Create Y axis
        svg2.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + (padding) + ",0)")
            .call(yAxis);

        // Define Line Elements
        var line = d3.svg.line()
            .x(function (d) { return xScale(d[0]); })
            .y(function (d) {
                return yScale(d[2]);
            })
            .interpolate("linear");

        //The line SVG Path we draw
        var lineGraph = svg2.append("path")
            .attr("d", line(dataset))
            .attr("stroke", "red").attr("stroke-width", 2)
            .attr("fill", "none");

    </script>
</body>

</html>