var width = 800
var height = 400
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var text = svg.append("g")
    .attr("transform", "translate(350, 15)")
    .append("text")
    .style("alignment-baseline", "hanging")
    .style("user-select", "none")
    .style("font-size", "120%")
    .style("fill", "grey")

var callback = function(content) {
    text.text(Date.now() + " >> " + content)
}

var tf = textfield()
    .x(20) // X Position
    .y(10) // Y Position 
    .width(300) // Width 
    .height(30) // Height 
    .fontSize("120%") // font size
    .callback(callback) // Callback returning the current text 
    .text("Search..") // Default text 
    .fill("steelblue") // Default fill 
    .stroke("blue") // Default border 
    .fillSelected("blue") // Fill when activated 
    .strokeSelected("black") // Border when activated 
    .color("white") // Text color 
    .colorSelected("grey") // Text color when activated 
    .returnLowercase(false) // Auto-lowercase input text before calling back 
    .returnEmpty(false) // Shall textfield call back if input text is empty
svg.call(tf)