0
在這個不錯的codepen example,hamad演示使用D3.js進行元素週期表繪製。這是本實施例的screenshoot:在D3.js驅動的元素週期表上繪製工具提示
衍生自被內的例子的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>
(我傾向於喜歡這種定義這種數據的一種不尋常的方式,因爲與目標輸出的視覺對應。)
但是,現在我想向工具提示添加一些內容。每個元素工具提示的數據應該是this page的字段blurb
的內容。
從這個數據集的片段是在這裏:
[
{
"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'中的一些奇怪字符,它們必須正確顯示)
誰幹下投票,請告訴我爲什麼。 – PageYe