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>

來源

2013-08-27 sn4ke

你'將整個lineData數組傳遞到lineFunction，但它應該只是一個單獨的數據。由於您將lineData限定爲所選內容，因此您可以執行.attr("d", lineFunction)。

您的diagonal也存在一些問題。 source和target訪問器都需要返回對象，在這種情況下，它們返回標量值。

然後，結果對象從source返回和target隨後將送入projection其中每個應該被進一步轉化爲描述的點的2元件陣列。如果source和target返回的對象的定義爲x和y（{x:, y:}），則根本不需要projection，因爲默認情況下會查找這些屬性。

來源

2013-08-27 01:08:52

當我將其更改爲.datum時，沒有任何反應。 – sn4ke

我已經更新了代碼，現在我收到了錯誤消息「Error：Problem parsing d =」M，C，，「」 – sn4ke

我更仔細地閱讀了文檔，對「投影」的目的感到困惑。我已經更新了答案，希望能夠澄清。 –

d3兩點之間的對角線

回答

相關問題