D3 chart with search box
Question
I have created a chart in D3 where nodes show the time at which particular individuals created a document. The chart also presents a search box, which turns nodes red depending on whether the search box input matches the words associated to that document (these words are listed in column 5 of the dataset - please see below for dataset).
My problem: once a search has been input into the box (ie. 'fish'), the website visitor must hit 'refresh' in order to run a new search (ie. 'dog'). I would prefer that instead, the chart remains visible when a new search is initiated, and the 'try it' button merely switches the colours of the nodes to reflect the new search choice. Here's what I have so far:
html, body { margin: 0; height: 100%; } g.hidden line, g.hidden path { display: none; } path { stroke: navy; stroke-width: 2px; 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; <!-- begin snippet: js hide: false console: true babel: false -->
<!DOCTYPE html> <html lang="en"> <head> <meta chartset="utf-8"> <title>Interactive scatterplot</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="d3.v4.js"></script> </head> <body> <script> var txtName = 0; function sayHi() { var txtName = document.getElementById("txtName"); console.log(txtName.value); var parseDate = d3.timeParse("%m/%d/%Y"); d3.csv("doc.csv") .row(function(d) { return { creator: d.creator, date: parseDate(d.date), number: Number(d.number), doc: d.doc }; }) .get(function(error, data) { var height = 300; var width = 500; var minDate = new Date(2000, 1, 1); var maxDate = new Date(2011, 1, 1); var y = d3.scaleOrdinal() .domain(['', 'may', 'milly', 'maggie', 'molly', '']) .range([300, 225, 150, 75, 15, 0]); 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", "100%").attr("width", "100%"); margin = { top: 40, right: 50, bottom: 0, left: 50 }; var redBox = svg.append("rect") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "orange"); var chartGroup = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.selectAll("circle") .data(data) .enter().append("circle") //.filter(function(d) {return d.doc = "milly";}) .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .attr("cx", function(d) { return x(d.date); }) .attr("cy", function(d) { return y(d.creator); }) .attr("r", 4) .style("fill", function(d) { if (d.doc == txtName.value) { return "red" } else { return "black" } }); console.log(txtName.value); 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)); }); } </script> <textarea id="txtName" name="txt-Name" placeholder="Search for something.."></textarea> <button onclick="sayHi()">Try it</button> <!-- <div class="test-wrapper"> --> <!-- </div><!-- .test-wrapper --> </body> </html>
Here is the dataset:
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
Currently, the creation of the graph and the process of obtaining the search-box value fall under one function. I tried to make them separate, but ending the function before the creation of the graph meant that the graph did not recognize the variable txtName . I also tried copy-pasting the block relating to the colour of the circles to the sayHi function, but this makes the graph unresponsive.
Any help appreciated.
2 answers
solution1
2 ACCPTED 2018-05-16 06:04:57
Right now you're drawing the chart after the button is clicked. That's not a good idea for changing the colours of the circles when the user clicks the button.
So, remove that inline function call and the sayHi function altogether. Then, inside the d3.tsv callback (that's a TSV, not a CSV), get the value of the text area:
d3.select("button").on("click", function() {
var txtName = d3.select("#txtName").node().value;
circles.style("fill", function(d) {
return d.doc === txtName ? "red" : "black";
})
})
Here, circles is your circles' selection. Remember to name your selections.
Here is a demo using your code: https://jsfiddle.net/dhy4yt2z/1/
PS: your code have several other minor issues that should be corrected, like the use of margins.
solution2
1 2018-05-16 06:06:54
You can store the circles to a variable and just change the fill based on the textarea value.
I've used a bit of jQuery so that the user doesn't even have to press the Try it button as a bonus. You may remove it if you like.
Here's a plunker
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.