<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing Donut first</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style type="text/css">
#first {
height: 80%;
width: 30%;
border: 3px solid #73AD21 !important;
position: absolute !important;
}
.slice path {
stroke: #fff;
stroke-width: 1px;
}
.textTop {
font-family: 'Times';
font-weight: bold;
font-size: 15pt;
fill: #2c3218;
}
.textBottom {
fill: #444;
font-family: 'Times';
font-weight: bold;
font-size: 20pt;
}
.top {
border: 1px solid #bbb;
color: #777;
font-family: 'Segoe UI';
text-decoration: none;
}
.top:hover {
border: 1px solid #555;
color: #333;
}
.tooltip {
background: #eee;
box-shadow: 0 0 5px #999999;
color: #080808;
line-height: 16px;
border: 1px solid #d4d4d4;
display: inline-block;
font-size: 12px;
/*padding: 10px;*/
position: absolute;
text-align: center;
width: auto;
height: auto;
z-index: 10;
opacity: 0.8;
}
</style>
</head>
<body>
<div id="first" viewBox="0 0 960 500" perserveAspectRatio="xMinYMid meet"></div>
<script type="text/javascript">
function resize() {
var w = document.getElementById('first').clientWidth;
// alert(w);
var h = document.getElementById('first').clientHeight;
// alert(h);
var r = Math.min(w, h) / 2;
// alert(r);
var first = $("#first"),
aspect = first.width() / first.height(),
first = first.parent();
$(window).on("resize", function() {
var targetWidth = first.width();
first.attr("width", targetWidth);
first.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");
return {
w: w,
h: h,
r: r
};
}
function first() {
var w = resize().w,
h = resize().h,
r = resize().r;
var inner = 0;
var color = d3.scale.category20();
var data = [
["192.168.12.1", 20],
["76.09.45.34", 40],
["34.91.23.76", 80],
["192.168.19.32", 16],
["192.168.10.89", 50],
["192.178.34.07", 18],
["192.168.12.98", 30]
];
var data = data.map(function(d) {
return {
IP: d[0],
count: d[1]
};
});
var total = d3.sum(data, function(d) {
return d3.sum(d3.values(d));
});
var svg = d3.select("#first")
.data([data])
.append("svg")
.classed("svg-content", true)
.attr("width", '100%')
.attr("height", '100%')
.attr("viewBox", "0 0 960 500")
.attr("preserveAspectRatio", "xMinYMax meet")
.append("svg:g")
.attr("transform", "translate(" + w / 2 + ", " + h + ")");
var tooltip = d3.select('#first')
.append('div')
.attr('class', 'tooltip');
tooltip.append('div')
.attr('class', 'label');
tooltip.append('div')
.attr('class', 'count');
tooltip.append('div')
.attr('class', 'percent');
var arc = d3.svg.arc()
.innerRadius(inner)
.outerRadius(r + 20);
var arcOver = d3.svg.arc()
.innerRadius(inner)
.outerRadius(r + 25);
var pie = d3.layout.pie()
.sort(null)
.startAngle(1.1 * Math.PI)
.endAngle(3.1 * Math.PI)
.value(function(d) {
return d.count;
});
var arcs = svg.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice")
.on("mouseover", function(d) {
d3.select(this).select("path").transition()
.duration(200)
.attr("d", arcOver)
.style('opacity', 0.7)
var total = d3.sum(data.map(function(d) {
return d.count;
}));
var percent = Math.round(1000 * d.data.count / total) / 10;
tooltip.select('.label').html(d.data.IP);
tooltip.select('.count').html(d.data.count);
tooltip.select('.percent').html(percent + '%');
tooltip.style('display', 'block');
})
.on('mousemove', function(d) {
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px");
})
.on("mouseout", function(d) {
d3.select(this).select("path").transition()
.duration(100)
.attr("d", arc)
.style('opacity', 1);
tooltip.style('display', 'none');
});
arcs.append("svg:path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc)
.transition()
.ease("exp")
.duration(1000)
.attrTween("d", tweenPie);
function tweenPie(b) {
var i = d3.interpolate({
startAngle: 1.1 * Math.PI,
endAngle: 1.1 * Math.PI
}, b);
return function(t) {
return arc(i(t));
};
}
var legend = svg.append("svg:g")
.attr("transform", "translate(" + w + ", -" + h / 2 + ")")
.attr("class", "legend")
.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * 25 + ")";
});
legend.append("rect")
.attr("width", 20)
.attr("height", 20)
.style("fill", function(d, i) {
return color(i);
});
legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("font-size", "20pt")
.style("font-family", "Times")
.text(function(d) {
return d.IP;
});
}
</script>
<script type="text/javascript">
first();
</script>
</body>
</html>
您好，我正在使用d3.js制作一个饼图并将其表示在div中，名为＆＃34; first＆＃34;。饼图也会生成并显示。但唯一的问题是svg：g元素有.attr（＆＃34;转换＆＃34;，＆＃34;翻译（＆＃34;＆＃34;）。饼图从一个点浮动到另一个点一旦div调整大小，div内部.g元素有时会飞出div，使得图例和饼图不可见。如果不考虑div大小，如何使g元素始终位于div的中心？我试过了通过提供50％和所有但不工作的每种可能的方式。我甚至尝试过显示：阻止但是位置仍然不固定。请帮我根据div大小自动化div中的g元素坐标，以便始终显示在svg / div的中心。 请帮我。我被卡住了。感谢您提前提供任何帮助。
答案 0 :(得分：0)
变化：
<div id="first" viewBox="0 0 960 500" perserveAspectRatio="xMinYMid meet"></div>
要：
<div id="first" style="width:960px;height:500px"></div>