d3两点之间的对角线

问题描述：

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

下面的代码抛出一个错误： “遗漏的类型错误：无法读取属性 '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>

答

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

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

然后，结果对象从source返回和target随后将送入projection其中每个应该被进一步转化为描述的点的2元件阵列。如果source和target返回的对象的定义为x和y（{x:, y:}），则根本不需要projection，因为默认情况下会查找这些属性。

当我将其更改为.datum时，没有任何反应。 – sn4ke

我已经更新了代码，现在我收到了错误消息“Error：Problem parsing d =”M，C，，“” – sn4ke

我更仔细地阅读了文档，对“投影”的目的感到困惑。我已经更新了答案，希望能够澄清。 –

d3两点之间的对角线

相关推荐