두 지점 사이의 대각선이

대각선을 그리려는 점이 있습니다. 트리 레이아웃을 사용하고 싶지 않습니다. 단지 두 점과 대각선 만 있으면됩니다.두 지점 사이의 대각선이

다음 코드는 오류를 던지고있다 : "catch되지 않은 형식 오류 : 정의의 '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

코드를 업데이트했습니다. 이제 오류 메시지가 나타납니다. "오류 : d ="M, C, "구문 분석 문제가 발생합니다. – sn4ke

문서를 자세히 읽었으며"투영 "의 목적에 대해 혼란스러워했습니다. 희망적으로 명확히하기 위해 답변을 업데이트했습니다. –

답변

관련 문제