Question

我有一个websocket提供数据包到d3图表。根据控制台日志，函数graphData（）肯定被调用。刷新页面时会更新数据，但不会像应该的那样更新实时更新。但是，轴确实似乎在更新。我已阅读，并且相信我已经遵循了.enter（）。append（）过程，但我一定是犯了错误：

<script type="text/javascript">
    var margin = {top:20, right: 20, bottom: 30, left:50},
        width = 600 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

        var svg = d3.select("#visualisation").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

        function graphData(data) {
            console.log("graphdata called")

            var x = d3.scaleLinear().range([0, width]);
            var y = d3.scaleLinear().range([height, 0]);

            var valueline = d3.line()
                .x(function(d) { return x(d.time); })
                .y(function(d) { return y(d.value); });

            x.domain(d3.extent(data, function(d) { return d.time; }));
            y.domain(d3.extent(data, function(d) { return d.value; }));

            var valueLine = d3.line()
                .x(function(d) { return x(d.time); })
                .y(function(d) { return y(d.value); });

            var circles = svg.selectAll("circle")
                .data(data);
                circles.exit().remove();
            circles.enter().append("circle")
               .attr("r", 2)
               .attr("cx", function(d) { return x(d.time); })
               .attr("cy", function(d) { return y(d.value); })
               .merge(circles);

            var line_graph = svg.selectAll("path")
                .data([data])
            line_graph.exit().remove();
            line_graph.enter().append("path")
                .attr("class", "line")
                .attr("d", valueLine)
                .merge(line_graph);

            var xaxis = svg.selectAll(".x")
                .data([data])
            xaxis.enter().append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .merge(xaxis).call(d3.axisBottom(x));

            var yaxis = svg.selectAll(".y")
                .data([data])
            yaxis.enter().append("g")
                .attr("class", "y axis")
                .merge(yaxis).call(d3.axisLeft(y));


        };
</script>

Answer 1

Fiddle with final solution。我将您的大多数生成器从graphData函数移到顶部代码中。

  var circles = svg.selectAll("circle")
    .data(data);

  circles.exit().remove();

  circles.enter().append("circle")
    .attr("r", 2)
    .merge(circles)
        .attr("cx", function(d) {
        return x(d.time);
        })
        .attr("cy", function(d) {
        return y(d.value);
        });

  var line_graph = svg.selectAll(".line")
    .data([data])

  line_graph.exit().remove();

  line_graph.enter().append("path")
    .attr("class", "line")
    .merge(line_graph)
        .attr("d", valueLine);

  svg.select(".x").call(d3.axisBottom(x));
  svg.select(".y").call(d3.axisLeft(y));

我还对您更新轴的方式进行了一些修改。轴正确更新不需要.enter().append()，只需要调用刻度。

D3线和点无法更新新数据

1 个答案: