删除调整大小的D3.js路径

我正在尝试删除窗口大小的先前路径。您可以在末尾看到我在拆卸线/路径上的尝试。我怀疑我没有引用正确的元素；我想删除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。

在渲染函数启动后立即添加 $("svg").empty()添加jQuery。喜欢..

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的所有内容都会清空/删除。

也请参考此网站。有一个很好的响应图表示例。尝试以相同的方式构造自己的：(

class

删除所有路径

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

删除nasted元素上的路径

//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()

相关内容

最新更新

热门标签：