Svg 生成实时线图的问题_Svg_D3.js

Svg 生成实时线图的问题

svg d3.js

Svg 生成实时线图的问题,svg,d3.js,Svg,D3.js,我正在尝试使用教程生成实时线图 & 第一条路径很好，我得到了一个svg线图。现在当我这么做的时候 data.push（random（）） //将旧数据点从前面弹出 data.shift（） //换行 path.transition（）.attr（“d”，行）它不起作用，原因可能是什么。整个代码是 var data = [1, 2, 3, 4, 3, 4, 5, 8, 2, 3, 4, 1]; var w = 400, h = 200,

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

第一条路径很好，我得到了一个svg线图。现在当我这么做的时候

data.push（random（））

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

//换行 path.transition（）.attr（“d”，行）

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

        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);

var数据=[1,2,3,4,3,4,5,8,2,3,4,10]；
var w=400，
h=200，
保证金=20，
y=d3.scale.linear（）.domain（[0,10]）.range（[0+边距，h-边距]），
x=d3.scale.linear（）.domain（[0，data.length]）.range（[0+边距，w-边距]）
var vis=d3。选择（“主体”）
.append（“svg:svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
var g=vis.append（“svg:g”）
.attr（“转换”、“翻译（0200）”）；
var line=d3.svg.line（）
.x（函数（d，i）{返回x（i）；}）
.y（函数（d）{return-1*y（d）；}）
g、 追加（“svg:path”）.attr（“d”，行（数据））；
g、 追加（“svg:line”）
.attr（“x1”，x（0））
.attr（“y1”，-1*y（0））
.attr（“x2”，x（w））
.attr（“y2”，-1*y（0））
g、 追加（“svg:line”）
.attr（“x1”，x（0））
.attr（“y1”，-1*y（0））
.attr（“x2”，x（0））
.attr（“y2”，-1*y（d3.max（数据）））
g、 全选（“.xLabel”）
.数据（x.ticks（5））
.enter（）.append（“svg:text”）
.attr（“类”、“xLabel”）
.文本（字符串）
.attr（“x”，函数（d）{return x（d）}）
.attr（“y”，0）
.attr（“文本锚定”、“中间”）
g、 全选（“.yLabel”）
.数据（y.4））
.enter（）.append（“svg:text”）
.attr（“类”、“yLabel”）
.文本（字符串）
.attr（“x”，0）
.attr（“y”，函数（d）{return-1*y（d）}）
.attr（“文本锚定”，“右”）
.attr（“dy”，4）
g、 选择全部（“.xTicks”）
.数据（x.ticks（5））
.enter（）.append（“svg:line”）
.attr（“类”、“xTicks”）
.attr（“x1”，函数（d）{返回x（d）；}）
.attr（“y1”，-1*y（0））
.attr（“x2”，函数（d）{返回x（d）；}）
.attr（“y2”、-1*y（-0.3））
g、 选择全部（“.yTicks”）
.数据（y.4））
.enter（）.append（“svg:line”）
.attr（“类”、“yTicks”）
.attr（“y1”，函数（d）{return-1*y（d）；}）
.attr（“x1”，x（-0.3））
.attr（“y2”，函数（d）{return-1*y（d）；}）
.attr（“x2”，x（0））
setInterval（函数（）{
var number=Math.round（Math.random（）*10）+1；
数据推送（数字）；
data.shift（）；
g、 选择全部（“路径”）
.attr（“d”，行（数据））/您的区间中有一个错误.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);

setInterval（函数（）{
数据推送（10）；
data.shift（）；
g、 选择全部（“路径”）
.attr（“d”，行（数据））//您的修复工作正常。但是，现在，当图形动态更新，每2秒添加一个新的点时，线图在y轴穿过边界。我用屏幕截图更新了原始问题以显示我的问题。有什么建议，我如何修复它吗？您可以使用剪辑路径修复，就像Mike在他的（搜索“剪辑路径”）如果您对我的解决方案感到满意，请将其作为答案接受。如果您提出了更好的解决方案，请将其发布，或者作为问题的编辑。或者通过自己编写另一个完整的答案（稍后再接受）。提醒：如果您对答案感到满意，请接受。