svg 文本元素错误

Question

我不明白为什么这没有给我一些基本的文本元素。 cy 属性出于某种原因是 NAN。并且定位错误 - 左上角出现了一些东西。多谢指点

<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple text groups</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
</head>
<body>

<script>

var width = 400,
    height = 400;

var svg = d3.select("body").append("svg")
    .attr("width",400)
    .attr("height",400)
    .append('g');

dat = [{"name": "xxxx", "desc": "xxx xxx xxx"}, 
       {"name": "yyyy", "desc": "yyy yyy yyy"},
       {"name": "zzzz", "desc": "zzz zzz zzz"}];

svg.selectAll("text").data(dat).enter().append("text")
    .attr('cx', 50)
    .attr('cy', function(i){ return i * 100; })
    .text(function(d){ return d.name; });

</script>
</body>
</html>

Answer 1

.attr('y', function(i){ return i * 100; })

我这里是你的数据元素。我想你的意思是：

.attr('y', function(d,i){ return i * 100; }) //<-- i is now the index

编辑

正如@LarsKotthoff 指出的那样，应该是 x 和 y，而不是 cx 和 cy，它们是 circles。我还必须添加 + 10 "margin" 以将第一个文本元素移动到页面上。

例子here.

svg 文本元素错误

Errors with svg text elements

d3.js