我意识到这应该非常简单,并且我已经看到了我复制的关于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
最佳答案
问题是您的页面上已经有 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()
或类似的东西。
关于javascript - D3js 选择所有文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25176936/