각도 지시어에 왜 d3 막 대형 차트가 표시되지 않습니까?

Question

크롬 속성에서 svg 요소를 볼 수 있지만 페이지에는 아무 것도 없습니다. svg 요소는 표시되지만 내부의 rect 요소는 표시되지 않습니다.

<div class="chart-area"> 
    <svg width="750" height="263"> 
    <g transform="translate(0,0)"> 
     <rect y="0" height="263" width="150"></rect> 
    </g> 
    <g transform="translate(187.5,0)"> 
     <rect y="263" height="0" width="150"></rect> 
    </g> 
    <!-- ... --> 
    </svg> 
</div> 

svg에 행운을 넣어 네임 스페이스와 뷰 박스를 추가하려고했습니다. 내가 여기서 무엇을 놓치고 있니?

---

편집 - SVG

각도 괜찮습니다. & 복사 할 경우 올바르게 렌더링하는 지시문 외부에 svg 요소를 붙여 넣습니다. 그러나 지시문 내에서 svg를 생성하면 link 함수가 중단됩니다.

<div class="chart"> 
    <svg></svg> 
</div> 

렌더링 된 마크 업은 동일하므로 매우 손실됩니다.

---

편집 # 2 - 네임 스페이스

AmeliaBR의 의견을 바탕으로, 명시 적으로 네임 스페이스를 설정하는 방법은 무엇입니까? 네임 스페이스를 마크 업에 넣으려고했으나 도움이되지 않습니다. 나는 html5 네임 스페이스가 필요 없다는 인상을 받고 있었지만, 아마도 내가 틀렸어?

<!-- doesnt work --> 
<svg xmlns="http://www.w3.org/2000/svg"></svg> 

---

편집 # 3 - 태권도 연맹?

Robert Longson은 HTML 마크 업에는 네임 스페이스가 없으며 xhtml 만 사용할 수 있습니다. 그래서 질문은 여전히 ​​남아 있는데, 마크 업에 명시되어있을 때 작동하는 이유는 무엇입니까?하지만 자바 스크립트를 통해 추가 할 때는 작동하지 않습니다.

---

편집 # 4 - 링크 기능

SVG를 생성하는 각 링크 기능. Full plunker here.

function link (scope, el) { 
    // munge scope data 

    var width = el.find('.chart').width() 
    var height = Math.floor(width/RATIO) 
    console.log(width, height) 
    // 750 421 

    var svg = d3.select(el.find('svg')[0]) 
    .attr('width', width) 
    .attr('height', height) 

    // x, y 

    var bar = svg.selectAll('g') 
    .data(data) 
    .enter().append('g') 
    .attr('transform', function (d) { return 'translate(' + x(d.x) + ',0)' }) 

    bar.append('rect') 
    .attr('y', function (d) { return y(d.y) }) 
    .attr('height', function (d) { return height - y(d.y) }) 
    .attr('width', function() { return width/data.length }) 
    .attr('fill', 'black') 
} 

---

편집 # 5 - 나는 분리 된 Plunker (http://plnkr.co/edit/7dlqNz28HjX3Ho8vvn6m?p=preview)가 작동하는 것 같다

포기, 그래서 뭔가 내 코드에서 일어나는 구타있다 (문자/붙여 넣기 복사). 나는 포기한다!

곧 업데이트 모든 종속성, 당신은 뇌졸중을 가지고 및/또는 색상이 정의 된 입력 확인이 :(

Answer 1

를 닫 부담 등 다른 브라우저에서 시도 캐시를 지 웁니다.

Answer 2

사각형을 높이가 0이기 때문에 보이지 않습니다. 높이 속성을 0 이상의 값으로 설정하십시오.