Question

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

以下代码引发错误： “未捕获的TypeError：无法读取未定义的属性'y'”

---更新了工作代码------

<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>

Answer 1

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

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

然后，从source和target返回的结果对象随后将被输入projection，其中每个应进一步转换为描述点的2元素数组。如果您的source和target返回包含x且y已定义（{x:, y:}）的对象，则根本不需要projection，因为默认会查找这些属性。

d3两点之间的对角线

1 个答案: