通过选项选择更新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

回答

相关问题