帶搜索框的D3圖表
[英]D3 chart with search box
問題描述
我在D3中創建了一個圖表，其中節點顯示特定個人創建文檔的時間。 該圖表還提供了一個搜索框，根據搜索框輸入是否與該文檔關聯的單詞匹配，將節點變為紅色（這些單詞列在數據集的第5列中 - 請參閱下面的數據集）。
我的問題：一旦搜索輸入到框中（即'fish'），網站訪問者必須點擊'刷新'才能運行新的搜索（即'dog'）。 我希望相反，當啟動新搜索時圖表仍然可見，並且“嘗試”按鈕僅切換節點的顏色以反映新的搜索選擇。 這是我到目前為止所擁有的：
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>
這是數據集：
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
目前，圖形的創建和獲得搜索框值的過程屬於一個功能。 我試圖將它們分開，但是在創建圖形之前結束函數意味着圖形不能識別變量txtName 。 我還嘗試將與圓圈顏色相關的塊復制粘貼到sayHi函數，但這會使圖形無響應。
任何幫助贊賞。
2 個解決方案
解決方案1
2 已采納 2018-05-16 06:04:57
現在，您在單擊按鈕后繪制圖表。 當用戶點擊按鈕時，更改圓圈的顏色並不是一個好主意。
因此，完全刪除內聯函數調用和sayHi函數。 然后，在d3.tsv回調內（這是TSV，而不是CSV），獲取文本區域的值：
d3.select("button").on("click", function() {
var txtName = d3.select("#txtName").node().value;
circles.style("fill", function(d) {
return d.doc === txtName ? "red" : "black";
})
})
在這里， circles是您圈子的選擇。 請記住為您的選擇命名。
以下是使用您的代碼的演示： https ： //jsfiddle.net/dhy4yt2z/1/
PS：您的代碼還有其他一些應該糾正的小問題，比如使用邊距。
解決方案2
1 2018-05-16 06:06:54
工具提示在 d3 圖表中開箱即用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.