如何将angularjs动态文本输入与d3js相结合，创建svg圆圈进行过滤

how to combine angularjs dynamic text input with d3js-created svg circles for filtering

本文关键字：svg 创建 过滤 相结合 d3js angularjs 动态 文本 输入      更新时间：2023-09-26

我有一个有很多圆圈的d3js气泡图。它们有一个对应于城市名称的id。

var cities = ["Toronto", "London", "Paris"];

我有一个html格式的标准CCD_ 2框。

<input id="searchBox" onchange="checkFilled()" />

checkFilled()功能：

function checkFilled() {
  var inputVal = document.getElementById("searchBox").value;
  var circleId = d3.select("#" + inputVal + "");
  cities.forEach(function ( city ) {
      if (inputVal == "") {
          circleId.style("fill", "white");
      }
      else if ( inputVal == city ){
          circleId.style("fill", "red");
      }
  })
}

这很有效(填充被更改(，但很笨拙：区分大小写，需要点击回车键，删除文本时不会恢复。

我的目标是让它充满活力。填充应该随着文本的实时添加/删除而变化，就像下面的例子一样：http://jsfiddle.net/sravikiran/eBcaB/5/light/其中演示了使用angular js输入对html表进行排序。

理想情况下，排序行为可以在d3js或javascript代码创建的svg元素上复制。

我的2美分

<input id="searchBox" onkeyup="checkFilled()" />
function checkFilled() {
  var inputVal = document.getElementById("searchBox").value;
  var sel = d3.selectAll("#" + circlesContainer + "").filter(function(d) { return this.id.match(new RegExp('^'+inputVal, 'i')); });
  d3.selectAll("#" + circlesContainer).style('fill', 'white');
  sel.attr('fill', 'red');
}
相关文章：