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

<强> EDITS

正如@LarsKotthoff指出的那样，x和y，而不是cx和cy应该是circles。我还必须添加+ 10＆＃34;保证金＆＃34;将第一个文本元素移到页面上。

示例here。

svg文本元素的错误

1 个答案: