public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Testing");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
}
}
我已经尝试了很多，但我无法在<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="house.appbartesting.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing Donut Chart</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style type="text/css">
#first {
/* width: 500px;
height: 300px;*/
height: 50%;
width: 50%;
border: 3px solid #73AD21;
position: absolute;
}
#chart {
position: absolute;
height: 100%;
width: 100%;
}
#chart legend {
position: absolute;
margin: 0%;
}
#first legend {
position: absolute;
margin: 0%;
}
.slice path {
stroke: #fff;
stroke-width: 1px;
}
.textTop {
font-family: 'Segoe UI';
font-weight: bold;
font-size: 10pt;
fill: #2c3218;
}
.textBottom {
fill: #444;
font-family: 'Segoe UI';
font-weight: bold;
font-size: 10pt;
}
</style>
</head>
<body>
<div id="container">
<svg id="chart" viewBox="0 0 960 500" perserveAspectRatio="xMinYMid">
<div id="first">
<script type="text/javascript">
var w = document.getElementById('first').clientWidth;
// alert(w);
var h = document.getElementById('first').clientHeight;
// alert(h);
var r = Math.min(w, h) / 2 - 50;
// alert(r);
var inner = 70;
var color = d3.scale.category10();
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 vis = d3.select("#first")
.append("svg:svg")
.data([data])
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + r * 1.5 + "," + r * 1.5 + ")");
var textTop = vis.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.attr("class", "textTop")
.text("TOTAL")
.attr("y", -10),
textBottom = vis.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.attr("class", "textBottom")
.text(total)
.attr("y", 10);
var arc = d3.svg.arc()
.innerRadius(inner)
.outerRadius(r);
var arcOver = d3.svg.arc()
.innerRadius(inner + 0)
.outerRadius(r + 1);
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 = vis.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.5)
textTop.text(d3.select(this).datum().data.IP)
.attr("y", -10);
textBottom.text(d3.select(this).datum().data.count)
.attr("y", 10);
})
.on("mouseout", function(d) {
d3.select(this).select("path").transition()
.duration(100)
.attr("d", arc)
.style('opacity', 1);
textTop.text("TOTAL")
.attr("y", -10);
textBottom.text(total);
});
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 = d3.select("#first")
.append("svg")
.attr("x", w)
.attr("y", h)
.attr("class", "legend")
.attr("width", w / 2)
.attr("height", h)
.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * 20 + ")";
});
legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {
return color(i);
});
legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d) {
return d.IP;
});
</script>
</div>
</svg>
</div>
<script type="text/javascript">
var chart = $("#chart"),
aspect = chart.width() / chart.height(),
container = chart.parent();
$(window).on("resize", function() {
var targetWidth = container.width();
chart.attr("width", targetWidth);
chart.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");
</script>
</body>
</html>内正确展示甜甜圈和传说。我试图改变很多东西，但没有任何作用。这是不可能的，我正在尝试使用d3或我正在做的任何特定错误。此外，div和图表也没有响应。我很迷惑。请有人帮帮我。
在此先感谢您的帮助。
答案 0 :(得分：2)
您正在为图例和图片使用单独的SVG。我将图例附加到以前使用过的SVG中并转换为其位置。
以下代码段可能会对您有所帮助。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing Donut Chart</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style type="text/css">
#first {
/* width: 500px;
height: 300px;*/
height: 95% !important;
width: 95% !important;
border: 3px solid #73AD21 !important;
position: absolute !important;
}
#chart {
position: absolute;
height: 100%;
width: 100%;
}
#chart legend {
position: absolute;
margin: 0%;
}
#first legend {
position: absolute;
margin: 0%;
}
.slice path {
stroke: #fff;
stroke-width: 1px;
}
.textTop {
font-family: 'Segoe UI';
font-weight: bold;
font-size: 10pt;
fill: #2c3218;
}
.textBottom {
fill: #444;
font-family: 'Segoe UI';
font-weight: bold;
font-size: 10pt;
}
</style>
</head>
<body>
<div id="container">
<svg id="chart" viewBox="0 0 960 500" perserveAspectRatio="xMinYMid">
<div id="first">
<script type="text/javascript">
var w = document.getElementById('first').clientWidth;
// alert(w);
var h = document.getElementById('first').clientHeight;
// alert(h);
var r = Math.min(w, h) / 2 - 50;
// alert(r);
var inner = 70;
var color = d3.scale.category10();
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 vis = d3.select("#first")
.append("svg:svg")
.data([data])
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + r * 1.5 + "," + r * 1.5 + ")");
var textTop = vis.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.attr("class", "textTop")
.text("TOTAL")
.attr("y", -10),
textBottom = vis.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.attr("class", "textBottom")
.text(total)
.attr("y", 10);
var arc = d3.svg.arc()
.innerRadius(inner)
.outerRadius(r);
var arcOver = d3.svg.arc()
.innerRadius(inner + 0)
.outerRadius(r + 1);
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 = vis.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.5)
textTop.text(d3.select(this).datum().data.IP)
.attr("y", -10);
textBottom.text(d3.select(this).datum().data.count)
.attr("y", 10);
})
.on("mouseout", function(d) {
d3.select(this).select("path").transition()
.duration(100)
.attr("d", arc)
.style('opacity', 1);
textTop.text("TOTAL")
.attr("y", -10);
textBottom.text(total);
});
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 = vis.append("g")
/*.attr("id", "first")
.append("g")*/
.attr("transform", "translate("+w / 3+", -"+ h/4 +")")
.attr("class", "legend")
.attr("width", w / 2)
.attr("height", h)
.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * 20 + ")";
});
legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {
return color(i);
});
legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d) {
return d.IP;
});
</script>
</div>
</svg>
</div>
<script type="text/javascript">
var chart = $("#chart"),
aspect = chart.width() / chart.height(),
container = chart.parent();
$(window).on("resize", function() {
var targetWidth = container.width();
chart.attr("width", targetWidth);
chart.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");
</script>
</body>
</html>