javascript - D3错误: NotFoundError: Node was not found

Question

我正在尝试实现 D3 的动态功能，为此我遵循 http://mbostock.github.io/d3/tutorial/bar-2.html 中给出的示例 它工作正常，但是当我添加 x 轴和 y 轴代码时，我从 redraw() 函数中收到“NotFoundError:未找到节点”错误。

如果没有轴绘制代码，它可以正常工作，但否则会从 redraw() 函数中收到“NotFoundError:未找到节点”错误。

让我知道问题是什么以及如何解决。 ——谢谢

//Data set
var t = 17;

var data = [
             {"time": 1, "value": 56, "color": "green"},
             {"time": 2, "value": 53, "color": "green"},
             {"time": 3, "value": 58, "color": "green"},
             {"time": 4, "value": 58, "color": "green"},
             {"time": 5, "value": 56, "color": "green"},
             {"time": 6, "value": 53, "color": "green"},
             {"time": 7, "value": 58, "color": "red"},
             {"time": 8, "value": 58, "color": "red"},
             {"time": 9, "value": 56, "color": "green"},
             {"time": 10, "value": 53, "color": "green"},
             {"time": 11, "value": 58, "color": "green"},
             {"time": 12, "value": 58, "color": "green"},
             {"time": 13, "value": 56, "color": "orange"},
             {"time": 14, "value": 53, "color": "green"},
             {"time": 15, "value": 58, "color": "orange"},
             {"time": 16, "value": 58, "color": "green"}
        ];

var minval = 0,
    maxval = 100, 
    sumval = 0, 
    sampsize = 30;

var max = 4, min = 0;

//var label_array = new Array();
var    val_array = new Array(),
    val_array_sum = new Array(),
    data_array = new Array(),
    val_array_stackedbar = new Array();

sampsize = data.length;

function next() {
    return {
      time: ++t,
      value: 60,
      color: "green"
    };
 }

 setInterval(function() {

   data.shift();
   data.push(next());

    redraw();

 }, 1500);

            var width = 300, height = 300, height2 = 5;
            var margin = {
                    top : 30,
                    right : 10,
                    bottom : 40,
                    left : 60
            }, width = width - margin.left - margin.right, height = height
            - margin.top - margin.bottom;

//            create the graph object
            var vis = d3.select("#stackedbar-chart3")
            .append("svg:svg")           
            .attr("class", "metrics-container3")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);
//            .append("g").attr(
//                                    "transform",
//                                    "translate(" + margin.left + ","
//                                    + margin.top + ")");


            var y = d3.scale.linear().domain([0, maxval]).range([height, 0]);

            var x = d3.scale.linear().domain([0, sampsize+1]).range([0, width]);

            var y2 = d3.scale.linear().domain([0, maxval]).range([0, height]);

            var yAxis = d3.svg.axis().scale(y).orient("left")
            .ticks(5);

            var xAxis = d3.svg.axis().scale(x).orient("bottom")
            .ticks(5);


//                Add first data-series
                var bars = vis.selectAll("rect")
                .data(data)
                .enter().append("svg:rect")
                .attr("fill", function(d) { return d.color; } )
                .attr("x", function(d, i) { return x(i+1); })
                .attr("y", function(d, i) { return height - y2(d.value); }    )
                .attr("width", 5)
                .attr("height", function(d, i) { return y2(d.value); });

现在添加轴

//            Add x-axis and y-axis
                vis.append("g").attr("class", "axis").call(yAxis);

                vis.append("g").attr("class", "axis").attr("transform",
                        "translate(0," + height + ")").call(xAxis);

//            Add the axes labels
                vis.append("text").attr("class", "axis-label").attr(
                        "text-anchor", "end").attr("x", 20).attr("y",
                                height + 34).text('Time');

使用重绘函数使图表动态化

    function redraw() {

        var bars = vis.selectAll("rect")
        .data(data, function(d) { return d.time; });

        bars.enter().insert("rect", "line")
        .attr("fill", function(d) { return d.color; } )
        .attr("x", function(d, i) { return x(i+1); })
        .attr("y", function(d, i) { return height - y2(d.value); }    )
        .attr("width", 5)
        .attr("height", function(d, i) { return y2(d.value); })
         .transition()
           .duration(1000)
           .attr("x", function(d, i) { return x(i) - .5; });

       bars.transition()
           .duration(1000)
           .attr("x", function(d, i) { return x(i) - .5; });

       bars.exit().transition()
           .duration(1000)
           .attr("x", function(d, i) { return x(i - 1) - .5; })
           .remove();

    }

Answer 1

您的代码不起作用，因为用于插入新条形的行不再存在。也就是代码

bars.enter().insert("rect", "line")

不起作用，因为没有 line 元素。您可以通过简单地附加新栏来解决此问题。修改jsfiddle here .