d3을 사용하여 id에 의해 svg에 테이블을 추가하십시오

아래 코드는 내 코드입니다. Chrome의 개발자/요소가 표시되면 elemnt가 생성되지만 브라우저에서 렌더링 할 때 표시되지 않습니다. elemnts가 개발자/요소 아래에 나타나기 때문에 데이터가 정확합니다.d3을 사용하여 id에 의해 svg에 테이블을 추가하십시오

<svg id="abc" width="100%" height="100%" 
      viewBox="-20 -20 800 800" 
      preserveAspectRatio="none"></svg> 

function createSpreadsheet(incData){ 
var keyValues = d3.keys(incData[0]) 

    d3.select("#abc") 
    .append("table") 

    d3.select("table") 
    .append("tr") 
    .attr("class", "head") 
    .selectAll("th") 
    .data(keyValues) 
    .enter() 
    .append("th") 
    .html(function (d) {return d}) 

    d3.select("table") 
    .selectAll("tr.data") 
    .data(incData).enter() 
    .append("tr") 
    .attr("class", "data") 

    d3.selectAll("tr") 
    .selectAll("td") 
    .data(function(d) {return d3.entries(d)}) 
    .enter() 
    .append("td") 
    .html(function (d) {return d.value}) 
} 
d3.json("data.json", function(error,data){ 

createSpreadsheet(data) 

)} 


data=[{'A':'123', 'B':'456'}, {'A':'321', 'B':'654'}]

출처

2016-07-08 DataDataData

테이블이 나타나지 않습니다. foreignObject를 사용하지 않는 한 모든 HTML 태그 (div, h1, p, table 등)를 SVG에 추가 할 수 없습니다. 그리고 dev 도구는 요소를 보여줄 것입니다. 이것을보십시오 :'d3.select ("# abc"). append ("dolphin");'. ''이 표시됩니다. 이는 의미가 없습니다. –

'createSpreadsheet' 함수에서'd3.select ("body")'또는 다른 HTML div를 사용하면 테이블이 나타날 것입니다. –

나는 @GerardoFurtado를 생각하면 대답으로 옮겨야한다. 이유는 궁금하다. – Cyril

당신은

이 통해 UR SVG 내부에 이물질을 만든 다음이 개체에 테이블을 추가 할 ... 그것으로 표를 삽입 할 수있는 SVG 내부의 이물질을 만들 필요가

var table = d3.select("#abc") 
    .append("foreignObject") 
    .attr("width", 500) 
    .attr("height", 500) 
    .append("xhtml:table"); 

table.append("tr") 
    .attr("class", "head") 
    .selectAll("th") 
    .data(keyValues) 
    .enter() 
    .append("th") 
    .html(function (d) {return d})

출처

2016-07-08 05:23:15

이것은 Internet Explorer에서 작동하지 않습니다. 나는 대신 OP를 다른 HTML 요소에 테이블을 추가하는 것이 좋습니다. –

예 .. IE에서는 작동하지 않습니다. 요구 사항인지 확실하지 않습니다. 그렇지 않으면 ... 이것은 작동하며 모든 주요 브라우저에서 지원됩니다. –

d3을 사용하여 id에 의해 svg에 테이블을 추가하십시오

답변

관련 문제