d3 两点之间的对角线答案

【问题标题】：d3 diagonal between two pointsd3 两点之间的对角线
【发布时间】：2013-08-29 13:57:28
【问题描述】：

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

以下代码抛出错误： “未捕获的类型错误：无法读取未定义的属性 '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>

【问题讨论】：

标签： d3.js diagonal

【解决方案1】：

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

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

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

【讨论】：

当我将其更改为 .datum 时，没有任何反应。
我已经更新了代码，我现在收到错误消息“Error: Problem parsing d="M,C, , ," "
我更仔细地阅读了文档，我对“投影”的目的感到困惑。我已经更新了答案，希望能澄清一下。
感谢您的帮助，我确实稍微修改了您的建议，我仍然使用 .data 并保留 .projection 但您帮助我看到了 d3.svg.diagonal 的对象部分。我已经更新了我的工作代码。