D3.js駆動の周期表のツールチップを描画

Question

codepen exampleのhamadは、D3.jsを使用して周期的な表の描画を実演しています。これは、この例のscreenshootある：例のhtmlコード内で定義されている誘導される構成要素のシンボルから

データ、及び次のようになります（

<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> 

を私はこれを好みの出力と視覚的に対応しているため、このようなデータを定義するのは珍しい方法です。）

しかし今、私はしたいと思いますいくつかのコンテンツをツールチップに追加します。各要素のツールチップのデータは、フィールドblurbの内容で、this pageです。このデータセットから

スニペットはここにある：

[ 
     { 
     "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" 
     }, 
    ... 
] 

例に、このようなツールチップを統合する方法は？ （ 'blurb'フィールドのいくつかの奇妙な文字に注意してください。正しく表示する必要があります）

Answer 1

これは役に立ちます。

私はstructure.Actuallyこれは、オペレーティングjavascriptのデータではなく、ダウンの投票をした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; 
    });