D3js 选择所有文本

Question

我意识到这应该很容易，而且我已经看到了我复制的关于pluralsight的教程。我仍然无法产生任何好的结果。我正在尝试在 SVG 元素中绘制文本。

\n\n

SVG 元素定义如下：

\n\n

SVG = d3.select("#wellguideDiagram")\n    .append("svg")\n    .attr({\n        width: width + (padding * 2),\n        height: height + (padding * 2)\n    });\n

\n\n

然后我只需测试我是否可以实际编写一个文本元素：

\n\n

SVG.append("text").text("wr\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6\xc3\xa6l").attr({\n    y: function (d) { return 250; },\n    x: function () { return diagramWidth + 30 + (padding * 2); },\n    fill: "red",\n    "font-size": "15px",\n    dy: ".35em"\n});\n

\n\n

我有一个包含以下内容的 JSON：

\n\n

var limits = {\n    depthdefinition: {\n        elements: [\n            {\n                depth: 3,\n                value: "oter"\n            },\n            {\n                depth: 30,\n                value: "portugeese warship"\n            },\n            {\n                depth: 267,\n                value: "Giant Squid"\n            },\n            {\n                depth: 300,\n                value: "seabed"\n            }\n        ]\n    },\n

\n\n

我想要的是能够显示 Json 中的所有内容。我尝试过编写这个，并完成了无数版本，但文本元素根本不会出现在 svg 容器中。

\n\n

SVG.selectAll("text")\n    .data(function () {\n        alert(staticData.depthdefinition.elements);\n\n        for (thing in staticData.depthdefinition.elements) {\n            alert(thing + " " + limits.depthdefinition.elements[thing].depth +\n                  " " + limits.depthdefinition.elements[thing].value);\n        }\n        return staticData.depthdefinition.elements;\n    })\n    .enter()\n    .append("text")\n    .text(function (d) {\n        alert(\'depth: \' + d.depth + " -> " + d.value);\n        return d.depth + " -> " + d.value;\n    })\n    .attr({\n        y: function (d) { return 250; },\n        x: function () { return diagramWidth + 30 + (padding * 2); },\n        fill: "red",\n        "font-size": "15px",\n        dy: ".34em"\n    });\n

\n\n

为了确保数据函数正常工作，我放入了函数调用中。而且效果很完美。返回我想要的值。但文本警报不会触发。

\n\n

有关如何进行这项工作的任何指示？

\n\n

jsFiddle 链接：http://jsfiddle.net/#&togetherjs=5tIU0TRowN

\n

Answer 1

问题是您text的页面上已经有元素（在轴中）。当您这样做时，就会选择这些.selectAll("text")，然后将您提供的数据与.data()它们相匹配。因此输入选择为空。

要解决此问题，您可以使用仅分配给这些元素的类并进行相应的选择：

SVG.selectAll("text.foo")
        .data(staticData.depthdefinition.elements)
        .enter()
        .append("text")
        .attr("class", "foo")
        .text(function (d) {
            return d.depth + " -> " + d.value;
        });

我似乎无法修改和保存您的 JSFiddle，但上面是您应该能够复制和粘贴的重要代码。

一般来说，不要用于alert()调试——使用console.log()或类似的东西。