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);
ありがとうございました!
私はSVG要素が ''
私は情報を見ていました、そして、私はポジションをとろうとしますが、できません。 –
私はそれをチェックアウトするつもりです、ありがとう! –
答えて
<table>
などのHTML要素をSVGで使用するには、<foreignObject>
の内部にある必要があります(FontAwesome要素と同じように)。このフォークフィドルを参照してください:https://jsfiddle.net/qogxmwov/1/
出典
2016-09-19 21:03:04 MatthewG
ありがとう、ありがとう! :) –
関連する問題