通過選項選擇更新SVG

我想通過選項更改來更新SVG中的文本元素。搜索完成後，我可以到達可以看到（在控制檯中）在頁面的初始加載中選項更改的位置，以及選項更改時的位置，但我一直沒有成功修改數字。任何幫助，將不勝感激。通過選項選擇更新SVG

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Dropdown Test</title> 
     <script src="https://d3js.org/d3.v4.min.js"></script> 
    </head> 
    <body> 
     <select id="filter"> 
     <option value="GroupOne">Group One</option> 
     <option value="secondTen">Group Two</option> 
     <option value="thirdTen">Group Three</option> 
     </select> 

     <section id='svgCanvas'> 
     </section> 
     <script> 
     var width = 100; 
     var height = 100; 

     var numberData = [ 
      {"Number":10,"Group":"GroupOne"}, 
      {"Number":13,"Group":"GroupTwo"}, 
      {"Number":6,"Group":"GroupThree"}, 
     ]; 

     var canvas = d3.select("#svgCanvas") 
      .append('svg') 
      .attr('height',height) 
      .attr('width',width); 

     function filterData(filterCriteria) { 
      console.log(filterCriteria); 

      var svgNumber = canvas.selectAll('text') 
       .data(numberData); 

      svgNumber.enter() 
       .append('text') 
       .filter(function(d){return d.Group == filterCriteria;}) 
       .text(function(d){return d.Number;}) 
       .attr('x',10) 
       .attr('y',30) 
       .attr('fill','#000000') 
       .attr('id','numberText'); 

      svgNumber.exit().remove(); 
     }; 

     filterData('GroupOne'); 

     d3.select("#filter") 
      .on('change', function() { 
      var filter = d3.select(this).property('value'); 
      filterData(filter); 
      console.log(filter); 
      }); 
     </script> 
    </body> 
    </html>

來源

2017-03-03 user7656032

'無功濾波器= this.value'。 –

你的意思是在「.on（'change'....」）函數中，當調用filterData（filter）函數時，問題似乎並不存在，控制檯會記錄正確的值 – user7656032

對不起，當我讀到*「我沒有成功獲取數字」*我認爲你的問題在於獲得輸入值，而不是改變文本元素，我只是寫了一個答案 –

你需要一些變化：

你的選擇值不匹配您的數據陣列;
將過濾器應用於數據本身;
由於這是D3 v4，merge的選擇（從第二次開始，您的「輸入」選項始終爲空）。

下面是工作代碼：

var width = 100; 
 
var height = 100; 
 

 
var numberData = [{ 
 
    "Number": 10, 
 
    "Group": "GroupOne" 
 
}, { 
 
    "Number": 13, 
 
    "Group": "GroupTwo" 
 
}, { 
 
    "Number": 6, 
 
    "Group": "GroupThree" 
 
}, ]; 
 

 
var canvas = d3.select("#svgCanvas") 
 
    .append('svg') 
 
    .attr('height', height) 
 
    .attr('width', width); 
 

 
function filterData(filterCriteria) { 
 

 
    var svgNumber = canvas.selectAll('text') 
 
     .data(numberData.filter(function(d) { 
 
      return d.Group == filterCriteria; 
 
     })); 
 

 
    svgNumber.exit().remove(); 
 

 
    svgNumber.enter() 
 
     .append('text') 
 
     .attr('x', 10) 
 
     .attr('y', 30) 
 
     .attr('fill', '#000000') 
 
     .attr('id', 'numberText') 
 
     .merge(svgNumber) 
 
     .text(function(d) { 
 
      return d.Number; 
 
     }); 
 

 
}; 
 

 
filterData('GroupOne'); 
 

 
d3.select("#filter") 
 
    .on('change', function() { 
 
     var filter = d3.select(this).property('value'); 
 
     //or just--> var filter = this.value; 
 
     filterData(filter); 
 
    });

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<select id="filter"> 
 
    <option value="GroupOne">Group One</option> 
 
    <option value="GroupTwo">Group Two</option> 
 
    <option value="GroupThree">Group Three</option> 
 
</select> 
 
<section id='svgCanvas'> 
 
</section>

來源

2017-03-04 00:44:01

工作完美！感謝您的幫助。 – user7656032

通過選項選擇更新SVG

回答

相關問題