Question

我正在尝试删除窗口大小调整时的上一个路径。您可以在最后看到我对线路/路径移除的尝试。我怀疑我没有引用正确的元素;我想删除svg的所有内容（轴，路径）并重绘它们。目前我只是涂抹了以前所有的路径/轴。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test Plot Viewer</title>
    <script src="js/lib/d3.v4.min.js"></script>
    <style>
      .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 2px;
      }

      #chart {
        position: fixed;
        left: 55px;
        right: 15px;
        top: 10px;
        bottom: 55px;
      }
    </style>
  </head>
  <body>

    <div id="chart"></div>

    <script>

      var chartDiv = document.getElementById("chart");
      var svg = d3.select(chartDiv).append("svg");

      function render() {

        // Extract the width and height that was computed by CSS.
        var width = chartDiv.clientWidth;
        var height = chartDiv.clientHeight;

        // Use the extracted size to set the size of an SVG element.
        svg
          .attr("width", width)
          .attr("height", height);

        // set the dimensions and margins of the graph
        var margin = {top: 10, right: 15, bottom: 55, left: 55};
            width = width - margin.left - margin.right,
            height = height - margin.top - margin.bottom;

        // parse the date time
        var parseTime = d3.timeParse("%m/%d %H:%M");

        // set the ranges
        var x = d3.scaleTime().range([0, width]);
        var y = d3.scaleLinear().range([height, 0]);

        // define the line
        var valueline = d3.line()
          .x(function(d) { return x(d.time); })
          .y(function(d) { return y(d.solar); });

        // Get the data
        d3.csv("data_eos.csv", function(error, data) {
          if (error) throw error;

          // format the data
          data.forEach(function(d) {
            d.time = parseTime(d.time);
            d.solar = +d.solar;
          });

          // Scale the range of the data
          x.domain(d3.extent(data, function(d) { return d.time; }));
          y.domain([0, d3.max(data, function(d) { return d.solar; })]);

          // Add the valueline path.
          svg.append("path")
              .data([data])
              .attr("class", "line")
              .attr("d", valueline);

          // Add the X Axis
          svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x)
              .tickFormat(d3.timeFormat("%m/%d %H:%M  ")))
            .selectAll("text")
              .style("text-anchor", "end")
              .attr("dx", "-.8em")
              .attr("dy", ".15em")
              .attr("transform", "rotate(-45)");

          // Add the Y Axis
          svg.append("g")
            .call(d3.axisLeft(y));

        });
      }

//      d3.select("svg").remove();
//      svg.remove();
//      d3.selectAll("g > *").remove()
//        d3.selectAll("chartDiv.path.line").remove();
//      d3.select("path.line").remove();
      render();

      // Redraw based on the new size whenever the browser window is resized.
      window.addEventListener("resize", render);

    </script>
  </body>
</html>

我的微弱尝试只是删除了这条线在最后被注释掉了。

任何想法？ TIA。

Answer 1

在脚本中添加jQuery，并在渲染函数启动后立即添加$("svg").empty()。像这样......

function render() {
        $("svg").empty();
        // Extract the width and height that was computed by CSS.
        var width = chartDiv.clientWidth;
        var height = chartDiv.clientHeight;

        // Use the extracted size to set the size of an SVG element.
        svg
          .attr("width", width)
          .attr("height", height);...

因此，每次调整窗口大小时，svg的所有内容都会被清空/删除。

另请参阅此website。响应式图表有一个很好的例子。尝试以相同的方式构建您的结构，并进行排序：）

Answer 2

按班级删除所有路径

//d3.selectAll("chartDiv.path.line").remove();
d3.selectAll('.line').remove()

删除禁烟元素上的路径

//d3.selectAll("chartDiv.path.line").remove();
var chartDiv = document.getElementById("chart");
var svg = d3.select(chartDiv).append("svg")

svg.attr('id','mysvg')
d3.select('#chart').selectAll('.line').remove()

删除svg

//d3.select("svg").remove();
d3.select('#mysvg').remove()

调整大小时删除d3.js路径

2 个答案: