無法使用D3JS中的html輸入值進行過濾

想知道是否可以使用兩個html輸入元素可用於過濾d.rating和d.value（請參閱下面的代碼）。我也可以動態地替換csv如果我使用下拉菜單並允許用戶選擇他們想要查看可視化對象的csv。無法使用D3JS中的html輸入值進行過濾

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

<html> 
 
<head> 
 

 
    <!-- Mobile Specific Metas 
 
    –––––––––––––––––––––––––––––––––––––––––––––––––– --> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 

 
</head> 
 

 

 

 
<body> 
 
    <input id="myInput" type="number"> 
 

 
<div class="container"> 
 

 

 

 

 
    <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 myInput; 
 
d3.select("#myInput").on("change", function(){ 
 
    myInput = this.value; 
 

 

 
    d3.csv("austin_fsq.csv", function(d) { 
 
    d.sno = +d.sno; 
 
    if (d.sno && d.rating>=9&&d.value < myInput) return d; 
 
    }, function(error, classes) { 
 
    if (error) throw error; 
 

 
    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> 
 
</html>

來源

2017-02-15 SNT

你必須輸入值轉換爲數字，在if條件使用前（含單目運算符加，例如）：

if (d.sno && d.rating >= 9 && d.value < +myInput) return d; 
    //converting to a number -----------^

這裏是你更新的重擊者：https://plnkr.co/edit/wmFIxN6ZydAxLhVDSWNf?p=preview

編輯：避免使用行函數。

現在，您正在使用行功能來過濾數據。這會導致在輸入輸入後加載和解析CSV文件的不良影響，這會導致一些延遲（永遠不會有良好的用戶體驗）。

另一種方法是在加載和解析數據後過濾數據。這是邏輯：

//d3.csv loads and parses the CSV file d3.csv("austin_fsq.csv", function(d) { d.sno = +d.sno; return d; }, function(error, data) { if (error) throw error; //check the input inside d3.csv d3.select("#myInput").on("change", function() { myInput = this.value; var classes = data.filter(d => d.value < myInput && d.rating >= 9); //on change, call a function to draw the results draw(classes); }); //the function to draw the results here function draw(classes) { //code here... } });

其實，如果你使用這種方法，你可以很容易地解決第二個問題，你的問題，這是越來越兩個輸入值：

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

這裏是plunker顯示它，你可以設置這兩個值，你可以看到，幾乎沒有任何延遲後，你擊中「輸入」第二個：https://plnkr.co/edit/AjVBK3rTOF5aI4eDDbV5?p=preview

來源

2017-02-17 06:12:58

賞金可以在如何使用兩個輸入值的問題，也可以我從下拉列表中選擇csv文件。因此，如果用戶想要選擇達拉斯，他們可以使用該csv。 – SNT

是的，當然。在這種情況下，編輯問題僅解決此問題，因爲解決了輸入值的問題。 –

確實修改並再次感謝。 – SNT

無法使用D3JS中的html輸入值進行過濾

回答

相關問題