IMAGEM DENTRO DE UM JAVASCRIPT D3 Bubble chart
Bom dia galera, estou fazendo uns testes e estudando um pouco sobre JAVASCRIPT,
estou tentando fazer algumas coisas dentro desse D3 Bubble chart, como podem ver ao clicar na bola menor abre a bola ao centro,
quero que ao clicar no nome da pessoa, apareça a imagem na bola central, e não consigo fazer isso, alguém pode me ajudar ?
aqui o link do d3 do javascript que estou estudando, http://bl.ocks.org/phuonghuynh/54a2f97950feadb45b07
index
<!DOCTYPE html>
<html>
<head>
<title>Hello Bubble Chart</title>
<meta charset="utf-8">
<link href='[http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600,200italic,600italic&subset=latin,vietnamese'](http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600,200italic,600italic&subset=latin,vietnamese) rel='stylesheet' type='text/css'>
<script src="jquery.min.js"></script>
<script src="d3.min.js"></script>
<script src="d3-transform.js"></script>
<script src="extarray.js"></script>
<script src="misc.js"></script>
<script src="micro-observer.js"></script>
<script src="microplugin.js"></script>
<script src="bubble-chart.js"></script>
<script src="central-click.js"></script>
<script src="lines.js"></script>
<script src="resource.js">
</script>
<style>
.bubbleChart {
min-width: 100px;
max-width: 700px;
height: 700px;
margin: 0 auto;
}
.bubbleChart svg{
background: #000000;
}
</style>
</head>
<body style="background: #000000">
<div class="bubbleChart"/>
</body>
</html>javascript
$(document).ready(function () {
var bubbleChart = new d3.svg.BubbleChart({
supportResponsive: true,
//container: => use @default
size: 600,
//viewBoxSize: => use @default
innerRadius: 600 / 3.5,
//outerRadius: => use @default
radiusMin: 50,
//radiusMax: use @default
//intersectDelta: use @default
//intersectInc: use @default
//circleColor: use @default
data: {
items: [
{text: "João", count: ""},
{text: "Maria", count: ""},
{text: "José", count: ""},
{text: "Carlos", count: ""},
{text: "Januario", count: "1"},
{text: "Carminha", count: ""},
{text: "Cleontina", count: ""},
{text: "Joaquina", count: ""},
{text: "Claudia", count: ""},
],
eval: function (item) {return item.count;},
classed: function (item) {return item.text.split(" ").join("");}
},
plugins: [
{
name: "central-click",
options: {
text: "(70 ANOS, SOLTEIRO.)",
style: {
"font-size": "12px",
"font-style": "italic",
"font-family": "Source Sans Pro, sans-serif",
//"font-weight": "700",
"text-anchor": "middle",
"fill": "white"
},
attr: {dy: "65px"},
centralClick: function() {
alert("Here is more details!!");
}
}
},
{
name: "lines",
options: {
format: [
{// Line #0
textField: "count",
classed: {count: true},
style: {
"font-size": "28px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "0px",
x: function (d) {return d.cx;},
y: function (d) {return d.cy;}
}
},
{// Line #1
textField: "text",
classed: {text: true},
style: {
"font-size": "14px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "20px",
x: function (d) {return d.cx;},
y: function (d) {return d.cy;}
}
}
],
centralFormat: [
{// Line #0
style: {"font-size": "50px"},
attr: {}
},
{// Line #1
style: {"font-size": "30px"},
attr: {dy: "40px"}
}
]
}
}]
});
});Discussão (0)
Carregando comentários...