Question

我有js代码，在HTML页面中绘制一个简单的极坐标图。我试图让它每1秒更新一次图上的数据。我能够更新数据并绘制新点，但是，有两件事我还没想到。现在每一秒我都在清理绘图区域并绘制所有新内容，而不是通过创建从前一个位置到新位置的平滑滑动过渡来更新数据。
第二个问题是点的标记不会被旧点位置删除，这会在彼此之上创建多个标记。我应该添加什么才能为绘制的点及其标签创建平滑过渡？

这是我的代码段：

＆＃13;

<html>

<head>
  <meta charset='ISO-8859-1'>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body style='background-color:lightgray'>
  <div id="chart" style='width: 400px; height: 400px; padding-left: 5px; padding-bottom: 5px;'></div>

  <script>
    var color = d3.scale.category20();
    var deg2rad = Math.PI / 180;
    var width = 400,
      height = 350,
      radius = Math.min(width, height) / 2 - 30;

    var svg = d3.select("#chart").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var r = d3.scale.linear()
      .domain([90, 0])
      .range([0, radius]);

    var line = d3.svg.line.radial()
      .radius(function(d) {
        return r(d[1]);
      })
      .angle(function(d) {
        return -d[0] + Math.PI / 2;
      });

    var gr = null;

    createSkyplot();

    updateSkyPlot();

    function createSkyplot() {
      //////////////////////			  
      gr = svg.append("g")
        .attr("class", "r axis")
        .selectAll("g")
        .data(r.ticks(5))
        .enter().append("g");

      gr.append("circle").attr("r", r).style('fill', 'white');

      gr.append("text")
        .attr("y", function(d) {
          return -r(d) - 4;
        })
        .attr("transform", "rotate(20)")
        .style("text-anchor", "middle")
        .style('fill', 'blue')
        .text(function(d) {
          return d;
        });
      /////////////////////

      /////////////////////
      var ga = svg.append("g")
        .attr("class", "a axis")
        .selectAll("g")
        .data(d3.range(0, 360, 45))
        .enter().append("g")
        .attr("transform", function(d) {
          return "rotate(" + (d - 90) + ")";
        });

      ga.append("line").attr("x2", radius).style('stroke', 'black').style('stroke-dasharray', '1,8');

      ga.append("text")
        .attr("x", radius + 6)
        .attr("dy", ".35em")
        .style("text-anchor", function(d) {
          return d < 360 && d > 90 ? "end" : null;
        })
        .attr("transform", function(d) {
          return d < 360 && d > 90 ? "rotate(180 " + (radius + 3) + ",0)" : null;
        })
        .text(function(d) {
          return d + "°";
        });
      /////////////////////
    }

    function updateSkyPlot() {
      var pos = [{
        "position": [1, Math.random() * 20, Math.random() * 20],
        "label": 1
      }, {
        "position": [3, Math.random() * 20, Math.random() * 20],
        "label": 5
      }];

      var r = d3.scale.linear()
        .domain([90, 0])
        .range([0, radius]);

      var line = d3.svg.line.radial()
        .radius(function(d) {
          return r(d[1]);
        })
        .angle(function(d) {
          return -d[0] + Math.PI / 2;
        });

      svg.selectAll('circle').remove();

      gr.append("circle").attr("r", r).style('fill', 'white');

      var points = svg.selectAll("point")
        .data(pos)
        .enter()
        .append("a") // The container
        .attr("transform", function(d) {
          var coors = line([d.position]).slice(1).slice(0, -1);
          return "translate(" + coors + ")"
        });

      points.append("circle")
        .attr("class", "point")
        .attr("r", 10)
        .attr("fill", function(d, i) {
          return color(i);
        });

      points.append("text")
        .attr("class", "label")
        .text(function(d) {
          return d.label
        })
        .style("font-size", "10")
        .attr("transform", "translate(-4,5)");

      setTimeout(updateSkyPlot, 1000);
    }
  </script>

</body>

</html>

＆＃13;

也可以看到代码here。

我尝试过添加 svg.selectAll("label").remove();或svg.selectAll('point.label').remove(); 但它不起作用，当我添加svg.selectAll("text").remove();时，它会删除情节中的所有文字，这显然是我不想要的。

任何有关解决这些问题的帮助都将不胜感激。谢谢。

极坐标图表中数据的平滑过渡

0 个答案: