I'm beginner in D3. I would like to know how to include in text letters like č,š,ž..
I included line with utf-8:
<meta charset="utf-8">
I also tried this in the head:
<script type="text/javascript" charset="utf-8" src="D3/d3.js"></script>
Letters like č,š or ž are shown like �. That is the same with letters from .text("Število...") and also with words from loaded file *.csv.
I tried change letter č with code
č
but no success.
What can I do? Please help.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>Slo</title>
<script type="text/javascript" src="D3/d3.js"></script>
<style type="text/css">
.naslov {
fill: #505050;
font: 18px sans-serif;}
.podnaslov {
fill: #777;
font: 12px sans-serif;}
.besedilo {
fill: #777;
font: 8px sans-serif;}
.land {
fill: #ccc;
stroke: #fff;
stroke-linejoin: round;
stroke-linecap: round;
stroke-width: .5;}
</style>
</head>
<body>
<script type="text/javascript">
var w = 1000;
var h = 450;
var formatNumber = d3.format(",.0f");
var radius = d3.scale.sqrt()
.domain([0, 1e6])
.range([1, 90]);
//Projekcija
var projection = d3.geo.mercator()
.scale(11000)
.translate([-2480,10270]);
//Path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h)
//Napisi
var naslov = svg.append("text")
.text("PREBIVALSTVO V SLOVENIJI PO NASELJIH")
.attr("class", "naslov")
.attr("x",15).attr("y",30);
var podnaslov = svg.append("text")
.text("LETA 2002 in 2013")
.attr("class", "podnaslov")
.attr("x",15).attr("y",60);
var besedilo1 = svg.append("text")
.attr("class", "besedilo")
.text("Velikost kroga kaže na stevilo prebivalcev v naselju leta 2013.").attr("x",15).attr("dy",100);
var besedilo2 = svg.append("text")
.attr("class", "besedilo")
.text("Prikazani so podatki za naselja, ki so imela leta 2013 vec kot 1300 prebivalcev.").attr("x",15).attr("dy",112);
var besedilo3 = svg.append("text")
.attr("class", "besedilo")
.text("Zadrži miško na krogih in si oglej podatke.").attr("x",15).attr("dy",124);
//Load in GeoJSON data
d3.json("Obstara.geojson", function (data){
svg.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d", path)
.attr("class","land")
});
//Load mesta
d3.csv("Mesta_02_13.csv", function(error,podatki) {
if (error) return console.error(erorr);
svg.selectAll("circle")
.data(podatki)
.enter()
.append("circle")
.style("fill", function(d) {
if (d.trinajst-d.dva <= 0) {return "#9D5355"}
else { return "#006699"};})
.attr("cx", function(d) {return projection([d.lon, d.lat])[0];})
.attr("cy", function(d) {return projection([d.lon, d.lat])[1];})
.attr("r", function(d) { return radius(d.trinajst); })
.style("stroke","grey")
.style("stroke-width", '0.3px')
.style("opacity", 0.6)
.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
.on("mouseout", function(){d3.select(this).style("fill", function(d) {
if (d.trinajst-d.dva <= 0) {return "#9D5355"}
else { return "#006699" };});})
.append("title")
.text(function(d) { return d.name + "\n2002: " + d.dva + "\n2013: " + d.trinajst; })
});
</script>
</body>
I loaded csv file where are also included names with č,š,ž letters:
name,lat,lon,dva,trinajst
Ljubljana,46.0605,14.5166,258873,274826
Maribor,46.5620,15.6482,93847,94809
Celje,46.2524,15.2765,37834,37490
Mengeš,46.1686,14.5731,5557,6202
...
As may others have the same problem:
First you need to change the encoding of the document and save it once in UTF-8 format, and then put your UTF-8 texts inside that document.
Related
I have already created a force layout with images as nodes and mouse over text.
However, now I am trying to add the ability to search for a specific node using a text box and a search button. When a user searches for text I would like to select the matching node and its connections. The matched node and connections would change color. My code is below, but my search function is not working as intended. How do I change this code to get the desired behavior?
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.link {
stroke: #777;
stroke-opacity: 0.3;
stroke-width: 1.5px;
}
.node circle {
fill: #ccc;
stroke: #000;
stroke-width: 1.5px;
}
.node text {
fill: red;
display: none;
font: 10px sans-serif;
}
.node:hover circle {
fill: #000;
}
.node:hover text {
display: inline;
}
.cell {
fill: none;
pointer-events: all;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div>
<input id="targetNode" name="targetNode" type="text" value="Enter the text" />
<button onclick="search()">Search</button>
</div>
<script>
var width =1500,
height = 650
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.gravity(0.1)
.charge(-500)
.linkDistance(100)
.size([width, height]);
d3.json("miserables1.json", function(error, json) {
if (error) throw error;
force
.nodes(json.nodes)
.links(json.links)
.start();
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("svg:image")
.attr("xlink:href", function(d) {
return d.imagen;
})
.attr("x", function(d) {
return -25;
})
.attr("y", function(d) {
return -25;
})
.attr("height", 50)
.attr("width", 50)
.append("title")
.text(function(d){ return d.name });
function search() {
var userInput = document.getElementById("targetNode");
var theNode = d3.select("#c"+userInput.value);
return theNode;
}
function linkToNodes() {
force.links().forEach(function(link) {
linkedByIndex[link.source.index + "," + link.target.index] = 1;
});
}
function neighboring(a, b) {
return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
}
force.on("tick", function() {
link
.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
node
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
});
</script>
I'm not quite sure what you intend do happen when the user clicks search. Your search function tries to select "#c" + userInput.value, but I can't see anything on the page with that ID. If your data has a name field that you want it to be searchable on then you could set the id of each node to that name with the following:
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("id", d => "c" + d.name) // setting ID here
.attr("class", "node")
.call(force.drag);
This would allow your search function to get a reference to the node, but currently it is just returning it, and the calling function isn't going to do anything with that reference, if you want to highlight that that node as been selected you should put some code in here to do that, e.g:
function search() {
var userInput = document.getElementById("targetNode");
var theNode = d3.select("#c"+userInput.value);
theNode.style("color", "red");
}
I have a problem with d3.js. Markers display below the map instead on it.
Here's the code:
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js" type="text/javascript">
</script>
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js" type="text/javascript">
</script>
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js" type="text/javascript">
</script>
<script src="https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js" type="text/javascript">
</script>
<style>
.markerButton {
position: fixed;
top: 20px;
cursor: pointer;
z-index: 99;
}
body {
background: #fcfcfa;
}
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: #fff;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
.land {
fill: #222;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
}
</style>
<body onload="makeSomeMaps()">
<script>
var width = 960,
height = 500;
var projection = d3.geo.mollweide()
.scale(165)
.translate([width / 2, height / 2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("world-50m.json", function(error, world) {
if (error) throw error;
svg.insert("path", ".graticule")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "land")
.attr("d", path);
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
});
d3.select(self.frameElement).style("height", height + "px");
function circleMarker() {
var sizeScale = d3.scale.linear().domain([0,100,2000]).range([2,10,20]).clamp(true);
var randomDatapoint = "r" + Math.ceil(Math.random() * 7);
d3.selectAll("g.marker").selectAll("*").remove();
d3.selectAll("g.marker").append("circle")
.attr("class", "metro")
.attr("r", function(d) {return sizeScale(d[randomDatapoint])})
}
function makeSomeMaps() {
map = d3.carto.map();
d3.select("#map").call(map);
map.centerOn([-99,39],"latlong");
map.setScale(4);
map.refresh();
cityLayer = d3.carto.layer.csv();
cityLayer
.path("cities.csv")
.label("Metro Areas")
.cssClass("metro")
.renderMode("svg")
.x("x")
.y("y")
.clickableFeatures(true)
.on("load", function(){console.log(cityLayer.dataset())});
map.addCartoLayer(cityLayer);
}
</script>
<div id="map">
<button style="left: 340px;" class="markerButton" onclick="circleMarker();">Circle Marker</button>
</div>
</body>
</html>
Please find link to site live:
http://www.ewelinawoloszyn.com/mymap/d3_projection03.html
Perhaps it's something to do with map.centerOn?
Many thanks in advance for your help.
I suspect it's the asynchronous rendering nature of html/javascript. I had a similar issue in the past and I solved it by defining different layers/groups for the map and the markers. Something like:
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var map = svg.append("g");
var markers = svg.append("g");
and then append the map and the markers in these predefined layers. The markers will appear on top of the map because you define their layer after the map layer. In your case you should probably define a layer for each element (graticule layer etc.)
I need to represent each data in rectangle. I used grid layout using the below one
http://bl.ocks.org/herrstucki/5684816 My data is really huge its around 1700. When i tries to plot, its taking long time and sometime the browser hangs. Here is my plunker https://plnkr.co/edit/Xzr3RoQlm7DSiIuexmFz Please help
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: Helvetica;
font-size: 10px;
}
.point, .rect {
fill: #222;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3-grid.js"></script>
<script>
var rects = [];
var width = 960,
height = 500;
var rectGrid = d3.layout.grid()
.bands()
.size([360, 360])
.padding([0.1, 0.1]);
var svg = d3.select("body").append("svg")
.attr({
width: width,
height: height
})
.append("g")
.attr("transform", "translate(0,0)");
for(var i=0; i<1700; i++){
push();
}
function update() {
var rect = svg.selectAll(".rect")
.data(rectGrid(rects));
rect.enter().append("rect")
.attr("class", "rect")
.attr("width", rectGrid.nodeSize()[0])
.attr("height", rectGrid.nodeSize()[1])
.attr("transform", function(d) { return "translate(" + (d.x)+ "," + d.y + ")"; })
.style("opacity", 1e-6);
rect.transition()
.attr("width", rectGrid.nodeSize()[0])
.attr("height", rectGrid.nodeSize()[1])
.attr("transform", function(d) { return "translate(" + (d.x)+ "," + d.y + ")"; })
.style("opacity", 1);
rect.exit().transition()
.style("opacity", 1e-6)
.remove();
}
function push() {
rects.push({});
update();
}
</script>
You need to wait for one set of updates and transitions to finish before starting the next round. Borrowing from this question and applying it to your code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: Helvetica;
font-size: 10px;
}
.point, .rect {
fill: #222;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgit.com/interactivethings/d3-grid/master/d3-grid.js"></script>
<script>
var rects = [];
var width = 960,
height = 500;
var rectGrid = d3.layout.grid()
.bands()
.size([360, 360])
.padding([0.1, 0.1]);
var svg = d3.select("body").append("svg")
.attr({
width: width,
height: height
})
.append("g")
.attr("transform", "translate(0,0)");
var rectC = 1;
rects.push({});
function update() {
var rect = svg.selectAll(".rect")
.data(rectGrid(rects));
rect.enter().append("rect")
.attr("class", "rect")
.attr("width", rectGrid.nodeSize()[0])
.attr("height", rectGrid.nodeSize()[1])
.attr("transform", function(d) { return "translate(" + (d.x)+ "," + d.y + ")"; })
.style("opacity", 1e-6);
var transitions = 0;
rect
.transition()
.duration(50)
.attr("width", rectGrid.nodeSize()[0])
.attr("height", rectGrid.nodeSize()[1])
.attr("transform", function(d) { return "translate(" + (d.x)+ "," + d.y + ")"; })
.style("opacity", 1)
.each( "start", function() {
transitions++;
}).each( "end", function() {
if( --transitions === 0 ) {
rects.push({});
rectC += 1;
if (rectC < 1700) update();
}
});
rect.exit().transition()
.style("opacity", 1e-6)
.remove();
}
update();
</script>
I'm sure it's a newbie question, but I'm having problems in scaling my area chart correctly to the data. More precisely, the upper line of my area chart never reaches its maximum and I haven't figured out why, so far. For example, the maximum of the y value (FREQ) is 8, but the upper line limit of the line does not fit to that value (it is somewhere between 7 and 8).
Maybe it's due to my padding variable? Maybe it's shifting my axis in the wrong way?
Does anyone can tell me what my mistake is? I would really appreciate it :-)
Here's my code so far:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<title>Data Growth</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
body {
font: 12px sans-serif;
background: #DFE3DB;
}
.line {
fill: #7c9393;
stroke: #7c9393;
}
.axis path,
.axis line {
fill: none;
stroke: #34363c;
stroke-width: 3px;
shape-rendering: crispEdges;
}
.title {
font-size: 18px;
}
</style>
</head>
<body>
<div id="dataDevelopment"></div>
<script type="text/javascript">
//Data
var data = [{"YEAR":"2000","CL_ID":1,"FREQ":0,"SUMS":0},{"YEAR":"2001","CL_ID":1,"FREQ":1,"SUMS":1},{"YEAR":"2002","CL_ID":1,"FREQ":0,"SUMS":0},{"YEAR":"2003","CL_ID":1,"FREQ":2,"SUMS":3},{"YEAR":"2004","CL_ID":1,"FREQ":1,"SUMS":4},{"YEAR":"2005","CL_ID":1,"FREQ":3,"SUMS":7},{"YEAR":"2006","CL_ID":1,"FREQ":3,"SUMS":10},{"YEAR":"2007","CL_ID":1,"FREQ":1,"SUMS":11},{"YEAR":"2008","CL_ID":1,"FREQ":3,"SUMS":14},{"YEAR":"2009","CL_ID":1,"FREQ":3,"SUMS":17},{"YEAR":"2010","CL_ID":1,"FREQ":2,"SUMS":19},{"YEAR":"2011","CL_ID":1,"FREQ":7,"SUMS":26},{"YEAR":"2012","CL_ID":1,"FREQ":8,"SUMS":34},{"YEAR":"2013","CL_ID":1,"FREQ":3,"SUMS":37},{"YEAR":"2014","CL_ID":1,"FREQ":7,"SUMS":44},{"YEAR":"2015","CL_ID":1,"FREQ":1,"SUMS":45}];
//The graph shown instantly
var width = 800,
height = 500,
padding = 50;
var svg = d3.select("#dataDevelopment")
.append("svg")
.attr("width", width)
.attr("height", height);
var timeFormat = d3.time.format("%Y");
var xMin = d3.min(data, function(d) {return d.YEAR;});
var xMax = d3.max(data, function(d) {return d.YEAR;});
var yMin = d3.min(data, function(d) {return d.FREQ;});
var yMax = d3.max(data, function(d) {return d.FREQ;});
var x = d3.time.scale().domain([timeFormat.parse(xMin) , timeFormat.parse(xMax)])
.range([padding, width - padding]);
var y = d3.scale.linear().domain([yMin, yMax])
.range([height - padding, padding]);
//Axes
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues([timeFormat.parse(xMin) , timeFormat.parse(xMax)]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var lineGraph = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(timeFormat.parse(d.YEAR)); })
.y0(height - padding)
.y1(function(d) { return y(d.FREQ); });
svg.append("path")
.attr("class", "line")
.attr("d", lineGraph(data));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + (height - padding) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding + ", 0)")
.call(yAxis);
</script>
</body>
</html>
I know it is possible to display an image in a D3 tooltip. What I am trying to do is to display a bar graph in a tooltip (i.e when the mouse hovers over the object a bar graph appears). I have adapted code from http://bl.ocks.org/jarobertson/1483052#gistfile1.html and combined it with the bar graph code by Robert Lewand. And well, it doesn't work. I dont even get any errors in the console that could perhaps put me on the right path. Is it possible to do? Here is my code:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
div.tooltip {
position: absolute;
text-align: center;
width: 500px;
height: 550px;
padding: 8px;
font: 10px sans-serif;
background: #ddd;
border: solid 1px #aaa;
border-radius: 8px;
pointer-events: none;
}
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: middle;
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 960,
h = 500;
var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);
svg.append("svg:g")
.attr("transform", "translate(480,50)rotate(60)scale(2)")
.append("svg:rect")
.attr("width", 140)
.attr("height", 140)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
function mouseover() {
div.transition()
.duration(500)
.style("opacity", 1);
}
// where the tooltip previosly contained an image
function mousemove() {
div
.html("<h1>Bar Graph</h1><br> <svg class='chart'></svg>")
.style("left", (d3.event.pageX - 34) + "px")
.style("top", (d3.event.pageY - 12) + "px");
}
function mouseout() {
div.transition()
.duration(500)
.style("opacity", 1e-6);
}
// make bar graph
var width = 300,
height = 300;
var y = d3.scale.linear()
.range([height, 0]);
var chart = d3.select(".chart")
.attr("width", width)
.attr("height", height);
d3.tsv("data.tsv", type, function(error, data) {
y.domain([0, d3.max(data, function(d) { return d.value; })]);
var barWidth = width / data.length;
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });
bar.append("rect")
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.attr("width", barWidth - 1);
bar.append("text")
.attr("x", barWidth / 2)
.attr("y", function(d) { return y(d.value) + 3; })
.attr("dy", ".75em")
.text(function(d) { return d.value; });
});
function type(d) {
d.value = +d.value; // coerce to number
return d;
}
</script>
</body>
</html>
Thanks in advance!
apologies, the data.tsv file contains the following:
Sentiment value
Strongly positive 211
Positive 222
Neutral 654
Negative 618
Strongly negative 343
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
div.tooltip {
position: absolute;
text-align: center;
width: 500px;
height: 550px;
padding: 8px;
font: 10px sans-serif;
background: #ddd;
border: solid 1px #aaa;
border-radius: 8px;
pointer-events: none;
}
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: middle;
}
</style>
<script type="text/javascript">
var w = 960,
h = 500;
var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);
svg.append("svg:g")
.attr("transform", "translate(480,50)rotate(60)scale(2)")
.append("svg:rect")
.attr("width", 140)
.attr("height", 140)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
function mouseover() {
div.transition()
.duration(500)
.style("opacity", 1);
}
// where the tooltip previosly contained an image
function mousemove() {
div
.html("<h1>Bar Graph</h1><br> <svg class='chart'></svg>")
.style("left", (d3.event.pageX - 34) + "px")
.style("top", (d3.event.pageY - 12) + "px");
}
function mouseout() {
div.transition()
.duration(500)
.style("opacity", 1e-6);
}
// make bar graph
var width = 300,
height = 300;
var y = d3.scale.linear()
.range([height, 0]);
var chart = d3.select(".chart")
.attr("width", width)
.attr("height", height);
d3.tsv("data.tsv", type, function(error, data) {
y.domain([0, d3.max(data, function(d) { return d.value; })]);
var barWidth = width / data.length;
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });
bar.append("rect")
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.attr("width", barWidth - 1);
bar.append("text")
.attr("x", barWidth / 2)
.attr("y", function(d) { return y(d.value) + 3; })
.attr("dy", ".75em")
.text(function(d) { return d.value; });
});
function type(d) {
d.value = +d.value; // coerce to number
return d;
}
</script>
'data.tsv' file is not with us,
and we have written only
function mousemove() {
div
.html("<h1>Bar Graph</h1><br> <svg class='chart'></svg>")
.style("left", (d3.event.pageX - 34) + "px")
.style("top", (d3.event.pageY - 12) + "px");
}
above function will place 'Bar Graph' text and one svg element in tooltip.
Hope you will get it.
If not ask for more......