2016-09-19 4 views
0

矩形の内側に表を置き、土地の温度に関する情報を表示したいとします。d3.jsで図形の中に表を表示する際の問題

問題はテーブルが表示されていないことです。ブラウザを調べると、HTMLコードの表が表示されます。

このJsfiddleには、私がしたいことを示すコードを入れました。

私が間違っているかどうかわからない、私はd3.jsで新しくなった

これは私がテーブルを作るために使うコードです。

var margin = {top: 25, right: 15, bottom: 50, left: 55}, 
    width  = 500 - margin.left - margin.right, 
    height  = 250 - margin.top - margin.bottom; 

    var svgContainer = d3.select(".dashboard") 
      .append("div") 
      .attr("class", "col-lg-6") 
      .append("svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    svgContainer.append("rect") 
      .attr("x", 10) 
      .attr("y", 10) 
      .attr("width", width) 
      .attr("height", height) 
      .style("stroke", "#B5B5B5") 
      .style("fill", "none") 
      .style("stroke", 1); 

    svgContainer.append('svg:foreignObject') 
      .attr('font-family', 'FontAwesome') 
      .attr("x", 40) 
      .attr("y", 25) 
      .attr('font-size', '100px') 
      .html(function(d){ 
      return "<i class='fa fa-sun-o' id='imageTemp'></i>"; 
      }); 

    svgContainer.append("rect") 
      .attr("x", 160) 
      .attr("y", 40) 
      .attr("width", 250) 
      .attr("height", 120) 
      .attr("fill", "#D8D8D8"); 

    var table = svgContainer.append("table") 
      .attr("class", "table-bordered"); 

    table.append("thead") 
      .selectAll("th") 
      .data(data) 
      .enter() 
      .append("th") 
      .text(function(d){ 
      return "Week "+d.week; 
      }); 

    table.append("tbody") 
      .append("tr") 
      .selectAll("td") 
      .data(data) 
      .enter() 
      .append("td") 
      .text(function(d){ 
      return d.temperature; 
      }); 


    svgContainer.append("text") 
      .attr("x", (width/2))    
      .attr("y", 0 - (margin.top/2)) 
      .attr("text-anchor", "middle") 
      .attr("class", "title") 
      .text('TEMPERATURE - '+data[0].land); 

ありがとうございました!

+0

私はSVG要素が ''

を受け入れないと思います。 SVG要素の上にオーバーレイとしてテーブルを配置する必要があります。 – Terry

+0

私は情報を見ていました、そして、私はポジションをとろうとしますが、できません。 –

+0

私はそれをチェックアウトするつもりです、ありがとう! –

答えて

1

<table>などのHTML要素をSVGで使用するには、<foreignObject>の内部にある必要があります(FontAwesome要素と同じように)。

var table = svgContainer.append("svg:foreignObject") 
      .attr("x", 160) 
      .attr("y", 40) 
      .attr("width", 250) 
      .attr("height", 120) 
      .append("xhtml:body") 
      .append("table") 
      .attr("class", "table-bordered"); 

このフォークフィドルを参照してください:https://jsfiddle.net/qogxmwov/1/

+0

ありがとう、ありがとう! :) –

関連する問題