Question

我意识到这应该很容易，而且我已经看过我复制过的复数视频教程。我仍然无法产生任何好结果。我试图在我的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()或类似内容。

D3js选择所有文字

1 个答案: