Question

我正在尝试使用教程生成实时线图

http://www.janwillemtulp.com/2011/04/01/tutorial-line-chart-in-d3/＆amp; http://bost.ocks.org/mike/path/

第一条路径工作正常我得到一个svg线图。现在我做的时候

data.push（随机（））;

//从前面弹出旧数据点 data.shift（）;

//过渡行 path.transition（）。attr（“d”，line）;

它不起作用可能是什么原因。整个代码是

        var data = [1, 2, 3, 4, 3, 4, 5, 8, 2, 3, 4, 1];
        var w = 400,
        h = 200,
        margin = 20,
        y = d3.scale.linear().domain([0, d3.max(data)]).range([0 + margin, h - margin]),
        x = d3.scale.linear().domain([0, data.length]).range([0 + margin, w - margin])  

        var vis = d3.select("body")
        .append("svg:svg")
        .attr("width", w)
        .attr("height", h)

        var g = vis.append("svg:g")
                .attr("transform", "translate(0, 200)");    

        var line = d3.svg.line()
            .x(function(d,i) { return x(i); })
            .y(function(d) { return -1 * y(d); })       

        g.append("svg:path").attr("d", line(data));

        g.append("svg:line")
                .attr("x1", x(0))
                .attr("y1", -1 * y(0))
                .attr("x2", x(w))
                .attr("y2", -1 * y(0))

        g.append("svg:line")
                .attr("x1", x(0))
                .attr("y1", -1 * y(0))
                .attr("x2", x(0))
                .attr("y2", -1 * y(d3.max(data)))

        g.selectAll(".xLabel")
        .data(x.ticks(5))
        .enter().append("svg:text")
        .attr("class", "xLabel")
        .text(String)
        .attr("x", function(d) { return x(d) })
        .attr("y", 0)
        .attr("text-anchor", "middle")

        g.selectAll(".yLabel")
                .data(y.ticks(4))
                .enter().append("svg:text")
                .attr("class", "yLabel")
                .text(String)
                .attr("x", 0)
                .attr("y", function(d) { return -1 * y(d) })
                .attr("text-anchor", "right")
                .attr("dy", 4)

        g.selectAll(".xTicks")
        .data(x.ticks(5))
        .enter().append("svg:line")
        .attr("class", "xTicks")
        .attr("x1", function(d) { return x(d); })
        .attr("y1", -1 * y(0))
        .attr("x2", function(d) { return x(d); })
        .attr("y2", -1 * y(-0.3))

        g.selectAll(".yTicks")
                .data(y.ticks(4))
                .enter().append("svg:line")
                .attr("class", "yTicks")
                .attr("y1", function(d) { return -1 * y(d); })
                .attr("x1", x(-0.3))
                .attr("y2", function(d) { return -1 * y(d); })
                .attr("x2", x(0))

        setInterval(function() {
            data.push(10);
            data.shift();
            g.attr("d", line)
                .attr("transform", null)
                  .transition()
                    .ease("linear")
                    .attr("transform", "translate(" + x(-1) + ")");
            alert('yaho1');
        }, 2000);
    });

用这个新代码更新代码后

var data = [1, 2, 3, 4, 3, 4, 5, 8, 2, 3, 4, 10];
            var w = 400,
            h = 200,
            margin = 20,
            y = d3.scale.linear().domain([0, 10]).range([0 + margin, h - margin]),
            x = d3.scale.linear().domain([0, data.length]).range([0 + margin, w - margin])  

            var vis = d3.select("body")
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h)

            var g = vis.append("svg:g")
                    .attr("transform", "translate(0, 200)");    

            var line = d3.svg.line()
                .x(function(d,i) { return x(i); })
                .y(function(d) { return -1 * y(d); })       

            g.append("svg:path").attr("d", line(data));

            g.append("svg:line")
                    .attr("x1", x(0))
                    .attr("y1", -1 * y(0))
                    .attr("x2", x(w))
                    .attr("y2", -1 * y(0))

            g.append("svg:line")
                    .attr("x1", x(0))
                    .attr("y1", -1 * y(0))
                    .attr("x2", x(0))
                    .attr("y2", -1 * y(d3.max(data)))

            g.selectAll(".xLabel")
            .data(x.ticks(5))
            .enter().append("svg:text")
            .attr("class", "xLabel")
            .text(String)
            .attr("x", function(d) { return x(d) })
            .attr("y", 0)
            .attr("text-anchor", "middle")

            g.selectAll(".yLabel")
                    .data(y.ticks(4))
                    .enter().append("svg:text")
                    .attr("class", "yLabel")
                    .text(String)
                    .attr("x", 0)
                    .attr("y", function(d) { return -1 * y(d) })
                    .attr("text-anchor", "right")
                    .attr("dy", 4)

            g.selectAll(".xTicks")
            .data(x.ticks(5))
            .enter().append("svg:line")
            .attr("class", "xTicks")
            .attr("x1", function(d) { return x(d); })
            .attr("y1", -1 * y(0))
            .attr("x2", function(d) { return x(d); })
            .attr("y2", -1 * y(-0.3))

            g.selectAll(".yTicks")
                    .data(y.ticks(4))
                    .enter().append("svg:line")
                    .attr("class", "yTicks")
                    .attr("y1", function(d) { return -1 * y(d); })
                    .attr("x1", x(-0.3))
                    .attr("y2", function(d) { return -1 * y(d); })
                    .attr("x2", x(0))

            setInterval(function() {
                    var number = Math.round(Math.random()*10) + 1;
                    data.push(number);
                    data.shift();
                    g.selectAll("path")
                    .attr("d", line(data))  // <-- line(data) instead of data
                    .attr("transform", null)
                        .transition()
                            .ease("linear")
                            .attr("transform", "translate(" + x(-1) + ")");
            },
            200);

我的行为几乎与我想要的相似。但是，我有一些问题

enter image description here

正如您所看到的，当我随机生成一个新数据并将其推出并弹出前面的数据时。并且我绘制图形，该线穿过左侧的y轴边界。代码出了什么问题？我该如何解决这个问题？

Answer 1

您的间隔.attr("d", ___ )分配中有错误。您需要指定d3行功能可以使用的一些数据。

试试这个：

setInterval(function() {
    data.push(10);
    data.shift();
    g.selectAll("path")
    .attr("d", line(data))  // <-- line(data) instead of data
    .attr("transform", null)
      .transition()
        .ease("linear")
        .attr("transform", "translate(" + x(-1) + ")");
},
2000);

我刚用这个修补程序试过你的代码，但它确实有效。

生成实时线图的问题

1 个答案: