1

我有一些我想用它来创建对角线的点。我不想使用树形布局，我只想要两个点和一条对角线。

以下代码引发错误：“Uncaught TypeError: Cannot read property 'y' of undefined”

---更新的工作代码------

<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
//The data for our line
var lineData = [
    {
        "source": {
            "x": 100,
            "y": 300
        },
        "target": {
            "x": 200,
            "y": 400
        },
        "number":5
    },
    {
        "source": {
            "x": 150,
            "y": 350
        },
        "target": {
            "x": 250,
            "y": 450
        },
        "number":10
    },    
];

var lineFunction = d3.svg.diagonal()
   .projection(function(d) { return [d.y, d.x] })

var svgContainer = d3.select("body").append("svg")
                                .attr("width", 1000)
                                .attr("height", 1000);

svgContainer.selectAll("lines")
    .data(lineData)
    .enter()
    .append("path")
    .attr("d", lineFunction)
    .attr("stroke", "blue")
    .attr("stroke-width", function(d) { return d.number+"px"})
    .attr("fill", "none");
</script>
</body>
</html>
4

1 回答 1

0

您将整个lineData数组传递给，lineFunction但它应该只是一个单独的数据。由于您绑定lineData到选择，您可以执行.attr("d", lineFunction).

你的也有一些问题diagonal。和访问source器target都需要返回对象，在您的情况下它们返回标量值。

然后，从返回的结果对象source并将target随后馈送到projection每个应进一步转换为描述点的 2 元素数组的位置。如果您的sourceandtarget返回一个定义了 ( ) 的对象x，则您根本不需要，因为默认情况下会查找这些属性。y{x:, y:}projection

于 2013-08-27T01:08:52.523 回答