d3jsでの動的入力（CSV）の使用

Question

d3jsの描画関数に動的入力を使用しようとしています。ユーザーがcsvを変更すると、現在の選択が削除され、新しい入力の視覚化が描画されます。だから私の質問、私は選択とのonChange機能を使用して、その後、この関数内でcsvファイルを解析し、ドローfunction.The現在の作業コードを呼び出すことになるされ、ここでplunkerである：

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> 

ここで

Answer 1

はそれを行う方法の一例です：http://www.d3noob.org/2014/04/using-html-inputs-with-d3js.html

あなたはすべてを再描画が、特定の要素を更新する必要はありません。

私はあなたのCSVの変更については理解していません。ユーザーはCSVを変更しませんが、あなたの視覚的な出力はユーザーデータによって異なります。したがって、d3.csv（）のコールバック関数内で、ある種の描画関数を呼び出すコードを記述します。しかし、描画関数をそこで定義する必要はありません。あなたは関数を外部に書くことができ、そこで関数を呼び出すことができます。これによりコードの読みやすさが大幅に向上しました。 ;）