Javascript 过滤数据然后显示路径的搜索框？

我试图制作一个d3散点图，在网页上提供一个搜索框；当用户在搜索框中键入一个单词时，d3根据该单词过滤数据集，然后在散点图上创建一条通过过滤点的路径

我已经设法使代码能够将搜索词放入代码中，并获得所需的效果（），但当然，我不希望我的用户必须打开文本编辑器来搜索数据集

我喜欢Gerardo Furtado的

根据他的回答，我尝试了在这段代码中添加图形的代码。我没有收到任何错误，但我也没有收到任何行：

d3.select("button").on("click", function() {
  var txtName = d3.select("#txtName")
  chartGroup.selectAll(".line")
        .data(nest)
        .enter()
        .filter(function(d){return d.key == txtName;})
        .append("path")
          .attr("class","line")
          .attr("d",function(d) {return line(d.values)})
          .attr("stroke", function(d) {return colors(d.key)})
          .attr("stroke-width","2px")
          .style("stroke-dasharray", ("3, 3"))

我也看过了，但是我不能理解filter函数后面的代码块

---

感谢您的帮助这里有几种不同的解决方案。您可以在不透明度为零的情况下绘制所有路径：

var lines = chartGroup.selectAll(".line")
  .data(nest)
  .enter()
  .append("path")
  .style("opacity", 0)
  .attr("class", "line")
  .attr("d", function(d) {
    return line(d.values)
  })
  .attr("stroke", function(d) {
    return colors(d.key)
  })
  .attr("stroke-width", "2px")
  .style("stroke-dasharray", ("3, 3"));

然后在单击后更改不透明度：

d3.select("button").on("click", function() {
  var txtName = d3.select("#txtName").node().value;
  circles.style("fill", function(d) {
    return d.doc === txtName ? "red" : "black";
  })
  lines.style("opacity", function(d) {
    return d.key === txtName ? 1 : 0;
  })
})

下面是演示结果：

var parseDate=d3.timeParse（“%m/%d/%Y”）；
mycolour=d3.rgb（#f7f7f7”）；
var doc=`日期编号创建者doc
2000年6月16日3莫莉3大鼠
2002年2月25日5月4日第2类
12/05/2004 3莫莉4鱼
07/06/2006 1米莉1只狗
2003年7月9日5月4日鱼
2001年10月12日5月3日
6/15/2005 2玛姬3只老鼠
2004年9月6日1百万4条鱼
2005年5月10日1百万3只大鼠
2003年7月10日5月1日
2009年1月19日5月4日第2类
10/30/2007 1百万4条鱼
2009年8月13日5月4日第2类
9/30/2004 3莫莉1只狗
2006年1月17日5月3日
12/18/2009 3莫莉1只狗
11/02/2007 2玛姬3老鼠
2007年4月17日1百万4条鱼；
var数据=d3.tsvParse（文档，函数（d）{
返回{
创造者：d.创造者，
日期：解析日期（d.date），
编号：编号（d.编号），
医生：医生
};
});
var高度=300；
var宽度=500；
函数sortByDateAscending（a，b）{
返回a.日期-b.日期；
}
data=data.sort（sortByDateAscending）；
保证金={
前40名，
右:50,，
底部：0，
左：50
};
var minDate=新日期（2000年1月1日）；
var maxDate=新日期（2011年1月1日）；
变量y=d3.scalePoint（）
.domain（['may'，'milly'，'maggie'，'molly']）
.范围（[高度，0]）
.填充（0.2）；
var x=d3.scaleTime（）
.domain（[minDate，maxDate]）
.范围（[0，宽度]）；
var yAxis=d3.轴左（y）；
var xAxis=d3.axisBottom（x）；
var svg=d3.选择（“正文”）.追加（“svg”）.attr（“高度”，高度+100）.attr（“宽度”，宽度+100）；
var chartGroup=svg.append（“g”）.attr（“转换”、“转换”（“+margin.left+”，“+margin.top+”）
var line=d3.line（）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d.creator）；
});
var redBox=chartGroup.append（“rect”）
.attr（“y”，0）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“填充”，mycolour）
.附加（“g”）；
var nest=d3.nest（）
.键（功能（d）{
返回d.doc；
})
.条目（数据）；
var colors=d3.scaleOrdinal（）
.领域（功能（d）{
返回颜色（d键）
})
.范围（[“e66101”、“fdb863”、“b2abd2”、“5e3c99”）；
var line=d3.line（）
.x（功能（d，i）{
返回x（d.日期）；
})
.y（功能（d，i）{
返回y（d.creator）；
});
变量行=图表组。选择全部（“.line”）
.数据（嵌套）
.输入（）
.append（“路径”）
.style（“不透明度”，0）
.attr（“类”、“行”）
.attr（“d”，函数（d）{
返回线（d值）
})
.attr（“笔划”，功能（d）{
返回颜色（d键）
})
.attr（“笔划宽度”，“2px”）
.style（“笔划数组”（“3,3”）；
变量圆=图表组。选择全部（“圆”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“cx”，功能（d）{
返回x（d.日期）；
})
.attr（“cy”，函数（d）{
返回y（d.creator）；
})
.attr（“r”，4）
.样式（“填充”、“黑色”）；
d3.选择（“按钮”）。在（“单击”上，函数（）{
var txtName=d3.select（“#txtName”）.node（）.value；
圆形。样式（“填充”，功能（d）{
返回d.doc==txtName？“红色”：“黑色”；
})
线条。样式（“不透明度”，函数（d）{
返回d.key==txtName？1:0；
})
})
chartGroup.append（“g”）.attr（“class”，“x轴”）.attr（“transform”，“translate（0，“+height+”））））.call（d3.axisBottom（x.ticks（14））；
chartGroup.append（“g”）.attr（“class”，“y轴”）.call（d3.axisLeft（y）.ticks（5））
路径{
填充：无；
}
/*圈{
填充：#FF00FF；
笔画：海军；
笔画宽度：2px*/
}
g、 勾选文本y{
字体大小：30px；
字体：Garamond；
}
g、 勾选文本x{
字体大小：10px；
字体：Garamond；
}
g、 刻度线{
显示：无；
}

试试看
Hello@Gerardo Furtado:-）你已经成为我的一年。谢谢你的美丽的想象和清晰的解释。
d3.select("button").on("click", function() {
  var txtName = d3.select("#txtName").node().value;
  circles.style("fill", function(d) {
    return d.doc === txtName ? "red" : "black";
  })
  lines.style("opacity", function(d) {
    return d.key === txtName ? 1 : 0;
  })
})