1
パネルを使用し、ブートストラップグリフコンをその中に含めることを目的としたカスタムD3.jsチャートを作成していますが、レンダリングされていないようです。SVGにブートストラップグリフコンを含める方法
私のコードでJSFiddleを作成しましたが、私のコードも以下のとおりです。
var margin = {
top: 20,
right: 20,
bottom: 70,
left: 40
},
width = 1800 - margin.left - margin.right,
height = 1800 - margin.top - margin.bottom;
var svg = d3.select("body").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 + ")");
var data = [{
"name": "Read",
"status": "Green"
}, {
"name": "Write",
"status": "Green"
}, {
"name": "StorageAccount",
"status": "Red"
}];
var panelPadding = 10;
var panelWidth = 250;
var panelHeight = 150;
var rowCountMax = 2;
var currentRow = 0;
var xcount = 0;
var ycount = 0;
svg.selectAll("status-panel")
.data(data)
.enter().append("rect")
.attr("class", "status-panel")
.attr("x", function(d, i) {
if (xcount == rowCountMax)
xcount = 0;
return (panelWidth + panelPadding) * xcount++;
})
.attr("y", function(d, i) {
if (ycount == rowCountMax) {
currentRow += (panelHeight + panelPadding);
ycount = 1;
return currentRow;
} else {
ycount++;
return currentRow;
}
})
.attr("width", panelWidth)
.attr("height", panelHeight)
.attr("fill", function(d, i) {
return d.status == "Green" ? "#07BA72" : "#F14659";
})
.append("html")
.attr()
xcount = 0;
ycount = 0;
currentRow = 0;
var yTextPadding = 20;
svg.selectAll("status-panel")
.data(data)
.enter()
.append("text")
.attr("class", "status-panel-text")
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("x", function(d, i) {
if (xcount == rowCountMax)
xcount = 0;
return (panelWidth + panelPadding) * xcount++ + ((panelWidth + panelPadding)/2) - (d.name.length/2);
})
.attr("y", function(d, i) {
if (ycount == rowCountMax) {
currentRow += (panelHeight + panelPadding);
ycount = 1;
return currentRow + ((panelHeight + panelPadding)/2);
} else {
ycount++;
return currentRow + ((panelHeight + panelPadding)/2);
}
})
.text(function(d) {
return d.name;
})
.attr("font-weight", "200");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
</body>
pls正しいjsfiddle URLパスを追加してください。 –
これで修正されるはずです。 – TheAuzzieJesus