Я использую интерактивную функцию в кольцевой диаграмме, а также функцию кнопок для разметки кольцевой диаграммы в разные годы.Тем не менее, я стараюсь, чтобы текст, который является странами (ключом), а также ценой (значением), отображался на внутренней диаграмме пончиков, но, к сожалению, это не сработало!
Кроме того, я стараюсьвведите в скрипт какое-то слово, например, .text ('p'), но оно также не может отображать 'p' на внутренней диаграмме пончиков.Итак, кто-то может помочь в решении этой проблемы.Спасибо!
//This is the html
<html>
<head>
<meta charset="utf-8">
<title>Dount Chart</title>
</head>
<style type="text/css">
.pie {
margin: 20px;
}
.pie text {
font-family: "Verdana";
fill: #888;
}
.pie .name-text{
font-size: 1.8em;
}
.pie .year-text{
font-size: 1.5em;
}
.pie .price-text{
font-size: 1.5em;
}
</style>
<body>
<button onclick="update(data2015)">Year 2015</button>
<button onclick="update(data2016)">Year 2016</button>
<button onclick="update(data2017)">Year 2017</button>
<button onclick="update(data2018)">Year 2018</button>
<div id="my_dataviz"></div>
<div id="chart"></div>
<svg width="960" height="700"></svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="dountchart.js"></script>
</body>
</html>
<script>
//This is the script
//This is the partial data which is the same data type but different years in 2017 and 2017
var data2015 = {'Country A': 380, 'Country B': 280, 'Country C': 350,
'Country E': 425, 'Country F': 495}
var data2016 = {'Country A': 390, 'Country B': 285, 'Country C': 370,
'Country D': 570, 'Country E': 765, 'Country F': 625}
function update(data) {
// Compute the position of each group on the pie:
var pie = d3.pie()
.value(function(d) {return d.value; })
.sort(null); // This make sure that group order remains the same in the
pie chart
var data_ready = pie(d3.entries(data))
//for (var key in data_ready) {
//console.log(key);
//console.log(data2015[key]);
//}
// map to data
var u = svg.selectAll("path")
.data(data_ready)
.on("mouseover", function(d) {
d3.select(this)
.style("cursor", "pointer")
.style("opacity", 0.8)
.append("u")
.attr("class", "text-group");
u.append("text")
.attr("class", "name-text")
.text(function(d) {return d.key; })
.attr('text-anchor', 'middle')
.attr('dy', '-1.2em');
u.append("text")
.attr("class", "price-text")
.text(' AUD $' + `${d.value}` + ' Per Week')
.attr('text-anchor', 'middle')
.attr('dy', '2.0em');
})
.on("mouseout", function(d) {
d3.select(this)
.style("cursor", "none")
.style("fill", color(this._current))
.select(".text-group").remove();
})
.attr('d', arc)
.attr('fill', (d,i) => color(i))
.on("mouseover", function(d) {
d3.select(this)
.style("cursor", "pointer")
.transition()
.duration(1000)
.attr('d', arcOver)
.style("opacity", 0.5);
})
.on("mouseout", function(d) {
d3.select(this)
.style("cursor", "none")
.transition()
.duration(3000)
.attr("d", arc)
.style("opacity", 1.5)
.style("fill", color(this._current));
})
.each(function(d, i) { this._current = i; });
u.append('text')
.attr('text-anchor', 'middle')
.attr('dy', '.35em')
.text(text);
// Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
u.enter()
.append("path")
.merge(u)
.transition()
.duration(1000)
.attr('d', arc)
.attr('fill', (d,i) => color(i))
// remove the group that is not present anymore
u
.exit()
.remove()
}
// Initialize the plot with the first dataset
update(data2015)
</script>
На нем нет сообщений об ошибках, но также он не может отображать текст, который является d.key (страна) и d.value (цена) на внутренней диаграмме пончика.