javascript - D3js 选择所有文本

Question

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

SVG 元素定义如下:

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

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

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

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

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

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

SVG.selectAll("text")
    .data(function () {
        alert(staticData.depthdefinition.elements);

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

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

关于如何实现这项工作有任何指示吗？

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

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() 或类似的东西。