Dessiner des infobulles sur le tableau périodique D3.js

Question

Dans ce joli codepen example, hamad montre un dessin périodique en utilisant D3.js. Ceci est un screenshoot de cet exemple:

Les données des symboles des éléments sont dérivés est défini dans html code de l'exemple, et ressemble à ceci:

<script id="grid" type="text/plain"> 
H             He 
Li Be        B C N O F Ne 
Na Mg        Al Si P S CI Ar 
K Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br Kr 
Rb Sr Y Zr Nb Mo Tc Ru Rh Pd Ag Cd In Sn Sb Te I Xe 
Cs Ba :: Hf Ta W Re Os lr Pt Au Hg Ti Pb Bi Po At Rn 
Fr Ra :: Rf Db Sg Bh Hs Mt Ds Rg Cn Nh FI Mc Lv Ts Og 

     La Ce Pr Nd Pm Sm Eu Gd Tb Dy Ho Er Tm Yb Lu 
     Ac Th Pa U Np Pu Am Cm Bk Cf Es Fm Md No Lr 
</script> 

(J'ai tendance à aimer cette façon un peu inhabituelle de définir ces données, en raison de la correspondance visuelle à la sortie désirée.)

Cependant, maintenant je voudrais ajouter du contenu aux info-bulles. Les données sur chaque info-bulle d'élément doivent être le contenu du champ blurb de this page.

L'extrait de cet ensemble de données est ici:

[ 
     { 
     "number": 1, 
     "symbol": "H", 
     "name": "Hydrogen", 
     "mass": "1.00794(4)", 
     "color": "FFFFFF", 
     "conf": "1s1", 
     "electronegativity": 2.2, 
     "atomicRadius": 37, 
     "ionRadius": "", 
     "vanderwaalsRadius": 120, 
     "ie1": 1312, 
     "ea": -73, 
     "state": "gas", 
     "bondingType": "diatomic", 
     "metalPoint": 14, 
     "boilingPoint": 20, 
     "density": 0.0000899, 
     "metalNonmetal": "nonmetal", 
     "year": 1766, 
     "person": "Henry Cavendish", 
     "blurb": "Although hydrogen was prepared many years earlier, it was first recognized as a substance distinct from other flammable gases in 1766 by Henry Cavendish, who is credited with its discovery; it was named by A. L. Lavoisier in 1783.", 
     "id": "r1c1" 
     }, 
     { 
     "number": 2, 
     "symbol": "He", 
     "name": "Helium", 
     "mass": "4.002602(2)", 
     "color": "D9FFFF", 
     "conf": "1s2", 
     "electronegativity": "", 
     "atomicRadius": 32, 
     "ionRadius": "", 
     "vanderwaalsRadius": 140, 
     "ie1": 2372, 
     "ea": 0, 
     "state": "gas", 
     "bondingType": "atomic", 
     "metalPoint": "", 
     "boilingPoint": 4, 
     "density": 0, 
     "metalNonmetal": "noble gas", 
     "year": 1868, 
     "person": "Jules Janssen", 
     "blurb": "A French astronomer, Pierre-Jules-C�sar Janssen, first discovered helium during the solar eclipse of 1868 in India when he detected a yellow line (587.49 nm) in the solar spectrum very close to the yellow sodium D-line. For many years helium was regarded as an element that might exist on the sun although it was unknown on the Earth.", 
     "id": "r1c2" 
     }, 
     { 
     "number": 3, 
     "symbol": "Li", 
     "name": "Lithium", 
     "mass": "6.941(2)", 
     "color": "CC80FF", 
     "conf": "[He] 2s1", 
     "electronegativity": 0.98, 
     "atomicRadius": 134, 
     "ionRadius": "76 (+1)", 
     "vanderwaalsRadius": 182, 
     "ie1": 520, 
     "ea": -60, 
     "state": "solid", 
     "bondingType": "metallic", 
     "metalPoint": 454, 
     "boilingPoint": 1615, 
     "density": 0.54, 
     "metalNonmetal": "alkali metal", 
     "year": 1817, 
     "person": "Johan Arfvedson", 
     "blurb": "Lithium was discovered by Johan August Arfvedson in 1817 during an analysis of petalite ore, an ore now recognised to be LiAl(Si2O5)2, taken from the Swedish island of Ut�. Arfvedson subsequently discovered lithium in the minerals spodumene and lepidolite. C.G. Gmelin observed in 1818 that lithium salts colour flames bright red.", 
     "id": "r2c1" 
     }, 
    ... 
] 

Comment intégrer cette info-bulle dans l'exemple? (faites attention à certains caractères étranges dans le champ 'blurb', ils doivent être affichés correctement)

Answer 1

Ceci peut aider.

Je pense que vous devez savoir plus sur les données javascript structure.Actually ceci est une question fondamentale sur le fonctionnement javascript données plutôt que d3.js

var states = []; 
var dataSet = [{},{}];//you need to complete it. It's your expect dataset from `https://www.datazar.com/file/f3fafca0c-4fe8-4002-b583-c32010ced997` 
var index = 0; //global variable to flag the index of the element 
d3.select("#grid").text().split("\n").forEach(function(line, i) { 
    var re = /\w+/g, 
     m; 
    while (m = re.exec(line)) { 
     states.push({ 
      blurb: dataSet[index].blurb,//added here 
      name: m[0], 
      x: m.index/3, 
      y: i 
     }); 
     index++; 
    } 
}); 

var svg = d3.select("svg"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"); 

var gridWidth = d3.max(states, function(d) { 
     return d.x; 
    }) + 1, 
    gridHeight = d3.max(states, function(d) { 
     return d.y; 
    }) + 1, 
    cellSize = 50; 

var state = svg.append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")") 
    .selectAll(".state") 
    .data(states) 
    .enter().append("g") 
    .attr("class", function(d) { 
     return "state" 
    }) 
    .attr("transform", function(d) { 
     return "translate(" + (d.x - gridWidth/2) * cellSize + "," + (d.y - gridHeight/2) * cellSize + ")"; 
    }); 

// Define the div for the tooltip 
var div = d3.select("body").append("div") 
    .attr("class", "tooltip") 
    .style("opacity", 0); 

state.append("circle") 
    .attr("cx", 1) 
    .attr("cy", 1) 
    .attr("r", 22) 
    .on("mouseover", function(d) { 
     div.transition() 
      .duration(200) 
      .style("opacity", .9); 
     div.html(d.blurb) //changed here 
      .style("left", (d3.event.pageX) + "px") 
      .style("top", (d3.event.pageY - 28) + "px"); 
    }) 
    .on("mouseout", function(d) { 
     div.transition() 
      .duration(100) 
      .style("opacity", 0); 
    }); 

state.append("text") 
    .attr("dy", ".55em") 
    .text(function(d) { 
     return d.name; 
    });