更新折線圖上的數據不起作用

更新數據時d3僅添加線，不會進行更新或移除。更新折線圖上的數據不起作用

我現在在我的代碼，d3文檔（V4），d3教程和論壇中搜索了幾個小時，但沒有找出爲什麼我的代碼無法正常工作。

我鑽代碼降低到最低限度，並標記了更新部分：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title></title> 
    <meta charset="utf-8" /> 
</head> 
<body> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 

    <form id="form"> 
     <select id="ddmSel" required> 
     <option value="0">TS1</option> 
     <option value="1">TS2</option> 
     <option value="2">TS3</option> 
     </select> 
     <input id="btnSubmit" type="submit" /> 
    </form> 

    <script type="text/javascript"> 
     var aTS = [ 
        [ 
         {"id":1, "DT": "2017-08-01", "val":1}, 
         {"id":1, "DT": "2017-08-02", "val":3}, 
         {"id":2, "DT": "2017-08-01", "val":6}, 
         {"id":2, "DT": "2017-08-02", "val":2}, 
         {"id":3, "DT": "2017-08-01", "val":4}, 
         {"id":3, "DT": "2017-08-02", "val":5} 
        ], 
        [ 
         {"id":4, "DT": "2017-08-03", "val":8}, 
         {"id":4, "DT": "2017-08-04", "val":7} 
        ], 
        [ 
         {"id":5, "DT": "2017-08-04", "val":10}, 
         {"id":5, "DT": "2017-08-05", "val":12}, 
         {"id":6, "DT": "2017-08-04", "val":11}, 
         {"id":6, "DT": "2017-08-05", "val":9} 
        ], 
        ] 

     //update chart 
     $(function() { 
      $('#form').submit(function(event) { 

      //format data 
      aTS[$('#ddmSel').val()].forEach(function (d) { d.DT = d3.isoParse(d.DT); }); 
      var dataraw = aTS[$('#ddmSel').val()]; 

      //brute force works 
      //$("svg").find("*").remove(); 
      //initlineChart(); 

      //set scale ranges 
      xScale.domain(d3.extent(dataraw, function (d) { return d.DT; })); 
      yScale.domain([0, d3.max(dataraw, function (d) { return d.val; })]); 


      //add key for each id -> [key:id, values:[data]] 
      var data = d3.nest().key(function (d) { return d.id }).entries(dataraw); 

//this does not work properly: only enter works, no update, no remove 

      //bind data to DOM 
      var ts = g.selectAll("ts") 
       .data(data) 

      //enter elements 
      ts.enter().append("path") 
       .merge(ts) //enter & update elements 
       .attr("class", "ts") 
       .attr("d", function (d) { return line(d.values); }) 
       .attr("fill", "none") 
       .attr("stroke-width", 1) 
       .style("stroke", function (d) { return colorScale(d.key); }); 

      //remove elements 
      ts.exit().remove();   
//until here   

      event.preventDefault(); 
      }); 
     }); 


     function initlineChart() { 
      svgHeight = 500, 
      svgWidth = 960, 
      margin = { top: 20, right: 20, bottom: 30, left: 50 }, 

      //add svg to DOM 
      d3.select("body").append("svg") 
        //.attr("class", "svg1") 
        .attr("height", svgHeight) 
        .attr("width", svgWidth) 

      //get svg 
      svg = d3.select("svg"), 

      //set chartFrame 
      chartWidth = svg.attr("width") - margin.left - margin.right, 
      chartHeight = svg.attr("height") - margin.top - margin.bottom, 

      //standard group + transform 
      g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

      //scales x, y, color 
      xScale = d3.scaleTime().rangeRound([0, chartWidth]); 
      yScale = d3.scaleLinear().rangeRound([chartHeight, 0]); 
      colorScale = d3.scaleOrdinal(d3.schemeCategory10); 

      //get linevalues 
      line = d3.line() 
        .x(function (d) { return xScale(d.DT); }) 
        .y(function (d) { return yScale(d.val); }); 

     } 

     //init chart once 
     $(document).ready().one(initlineChart()); 
    </script> 


</body> 
</html>

jsfiddle

來源

2017-08-21 MiDi

在代碼中，你有這樣的：

var ts = g.selectAll("ts") 
    .data(data)

然而，沒有元素名爲<ts>。顯然，要通過類，而不是選擇：

var ts = g.selectAll(".ts") .data(data)

這裏是更新的小提琴：https://jsfiddle.net/qofsq5mc/

來源

2017-08-22 00:51:37

THX了很多，你是對的：這是顯而易見的！ – MiDi

更新折線圖上的數據不起作用

回答

相關問題