搜索框可以過濾數據，然后顯示路徑？

Question

我正在嘗試制作d3散點圖，以在網頁上提供搜索框； 當用戶在搜索框中輸入單詞時，d3會根據該單詞過濾數據集，然后通過散點圖上經過過濾的點創建路徑。

我設法使代碼達到可以將搜索詞放入代碼中並達到預期效果（ jsfiddle ）的地步 ，但是，當然，我不希望我的用戶必須打開文本編輯器來搜索數據集。

我喜歡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";

根據他的回答，我已經嘗試過將這段代碼附加到圖形上的代碼放置在這段代碼中。 我沒有錯誤，但也沒有一行：

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"))

我也看過了琥珀色托馬斯 （ Amber Thomas）的多線圖 ，但是我無法理解過濾函數后面的代碼塊。

任何幫助表示贊賞

Answer 1

這里有幾種不同的解決方案。 您可以繪制所有路徑，並且不透明度為零：

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 = `date number creator doc 6/16/2000 3 molly 3 rat 2/25/2002 4 may 2 cat 12/05/2004 3 molly 4 fish 07/06/2006 1 milly 1 dog 09/07/2003 4 may 4 fish 12/10/2001 4 may 3 rat 6/15/2005 2 maggie 3 rat 06/09/2004 1 milly 4 fish 10/05/2005 1 milly 3 rat 10/07/2003 4 may 1 dog 1/19/2009 4 may 2 cat 10/30/2007 1 milly 4 fish 8/13/2009 4 may 2 cat 9/30/2004 3 molly 1 dog 1/17/2006 4 may 3 rat 12/18/2009 3 molly 1 dog 11/02/2007 2 maggie 3 rat 4/17/2007 1 milly 4 fish`; var data = d3.tsvParse(doc, function(d) { return { creator: d.creator, date: parseDate(d.date), number: Number(d.number), doc: d.doc }; }); var height = 300; var width = 500; function sortByDateAscending(a, b) { return a.date - b.date; } data = data.sort(sortByDateAscending); margin = { top: 40, right: 50, bottom: 0, left: 50 }; var minDate = new Date(2000, 1, 1); var maxDate = new Date(2011, 1, 1); var y = d3.scalePoint() .domain(['may', 'milly', 'maggie', 'molly']) .range([height, 0]) .padding(0.2); var x = d3.scaleTime() .domain([minDate, maxDate]) .range([0, width]); var yAxis = d3.axisLeft(y); var xAxis = d3.axisBottom(x); var svg = d3.select("body").append("svg").attr("height", height + 100).attr("width", width + 100); var chartGroup = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")") var line = d3.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.creator); }); var redBox = chartGroup.append("rect") .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", mycolour) .append("g"); var nest = d3.nest() .key(function(d) { return d.doc; }) .entries(data); var colors = d3.scaleOrdinal() .domain(function(d) { return colors(d.key) }) .range(["#e66101", "#fdb863", "#b2abd2", "#5e3c99"]); var line = d3.line() .x(function(d, i) { return x(d.date); }) .y(function(d, i) { return y(d.creator); }); 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")); var circles = chartGroup.selectAll("circle") .data(data) .enter().append("circle") .attr("cx", function(d) { return x(d.date); }) .attr("cy", function(d) { return y(d.creator); }) .attr("r", 4) .style("fill", "black"); 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; }) }) chartGroup.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x).ticks(14)); chartGroup.append("g").attr("class", "y axis").call(d3.axisLeft(y).ticks(5)); 

 path { fill: none; } /* circle { fill: #FF00FF; stroke:navy; stroke-width:2px; */ } g.tick text y { font-size: 30px; font: Garamond; } g.tick text x { font-size: 10px; font: Garamond; } g.tick line { display: none; } 

 <script src="https://d3js.org/d3.v4.min.js"></script> <textarea id="txtName" name="txt-Name" placeholder="Search for something.."></textarea> <button>Try it</button> 

另一方面，如果您真的想將該代碼塊放入偵聽器中，則會出現問題：

當你做...

chartGroup.selectAll(".line")

...您正在選擇現有元素，因此您的輸入選擇為空。 而是選擇一些新類，例如：

chartGroup.selectAll(".lineFiltered")

這是更新的JSFiddle： https ://jsfiddle.net/qmps19ox/1/

但是，這種方法的問題是，除非您創建正確的輸入/更新/退出選擇，否則行會堆積。