IMAGEM DENTRO DE UM JAVASCRIPT D3 Bubble chart

itzMysto · Maio 9, 2016

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/p...97950feadb45b07

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' 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"}
            }
          ]
        }
      }]
  });
});