在d3js中使用動態輸入（CSV）

我想在d3js中使用動態輸入到繪圖函數。因此，當用戶更改csv時，它將刪除當前選擇併爲新輸入繪製可視化文件。所以我的問題是我會被使用的onChange功能與選擇，然後在這個函數中解析CSV和呼籲平局function.The當前工作的代碼在這裏plunker：在d3js中使用動態輸入（CSV）

https://plnkr.co/edit/AjVBK3rTOF5aI4eDDbV5?p=preview

<svg width="1250" height="1080"></svg> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
    <script> 
     var svg = d3.select("svg"), 
      width = +svg.attr("width"); 

     var format = d3.format(",d"); 

     var color = d3.scaleOrdinal(d3.schemeCategory10); 

     var pack = d3.pack() 
      .size([width, width]) 
      .padding(1.5); 

     var inputs = {}; 

     function selectCity(){ 


      //storing the drop-dsown selection in the ddSelection var 
      var ddSelection = document.getElementById("city").value; 

      //feeding that to create the csv filename you want 

      var str1 = ddSelection; 
      var str2 = ".csv"; 
      var csvFile = str1.concat(str2); 


      str1.concat(str2); 
      console.log(csvFile); 


     d3.csv(csvFile, function(d) { 
      d.sno = +d.sno; 
      return d; 
     }, function(error, data) { 
      if (error) throw error; 

      d3.selectAll("input").on("change", function(){ 
       inputs[this.id] = +this.value; 
       console.log(inputs.myValue + "-" + inputs.myRating) 
       if(inputs.myValue && inputs.myRating){ 
       var classes = data.filter(d => d.value < inputs.myValue && d.rating >= inputs.myRating); 
       draw(classes); 
       } 
      }) 

      function draw(classes) { 
       console.log(classes.length); 
       var root = d3.hierarchy({ 
         children: classes 
        }) 
        .sum(function(d) { 
         return d.value; 
        }) 
        .each(function(d) { 
         if (id = d.data.id) { 
          var id, i = id.lastIndexOf("."); 
          d.id = id; 
          d.package = id.slice(0, i); 
          d.class = id.slice(i + 1); 
         } 
        }); 

       var node = svg.selectAll(".node") 
        .data(pack(root).leaves()) 
        .enter().append("g") 
        .attr("class", "node") 
        .attr("transform", function(d) { 
         return "translate(" + d.x + "," + d.y + ")"; 
        }); 

       node.append("circle") 
        .attr("id", function(d) { 
         return d.id; 
        }) 
        .attr("r", function(d) { 
         return d.r; 
        }) 
        .style("fill", function(d) { 
         return color(d.package); 
        }); 

       node.append("clipPath") 
        .attr("id", function(d) { 
         return "clip-" + d.id; 
        }) 
        .append("use") 
        .attr("xlink:href", function(d) { 
         return "#" + d.id; 
        }); 

       node.append("text") 
        .attr("clip-path", function(d) { 
         return "url(#clip-" + d.id + ")"; 
        }) 
        .selectAll("tspan") 
        .data(function(d) { 
         return d.class.split(/(?=[A-Z][^A-Z])/g); 
        }) 
        .enter().append("tspan") 
        .attr("x", 0) 
        .attr("y", function(d, i, nodes) { 
         return 13 + (i - nodes.length/2 - 0.5) * 10; 
        }) 
        .text(function(d) { 
         return d; 
        }); 

       node.append("title") 
        .text(function(d) { 
         return d.data.id + "\n" + format(d.value); 
        }); 
      } 
     }); 
     } 
    </script> 
</div>

來源

2017-02-19 SNT

我找到了這個類似的問題，但給出的解決方案似乎並不適合我：http：//stackoverflow.com/questions/28998464/d3js-dynamic-csv-switch-from-dropdown-list？rq = 1 – SNT