Question

在这个不错的codepen example中， hamad 使用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"
      },
    ...
]

如何将此类工具提示集成到示例中？ （注意字段中的一些奇怪字符＆＃39; blurb＆＃39;，它们必须正确显示）

Answer 1

这可能有所帮助。

我认为您需要了解有关javascript数据结构的更多信息。实际上这是关于操作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;
    });

在D3.js驱动的周期表上绘制工具提示

1 个答案: