【发布时间】：2017-09-12 10:00:27
【问题描述】：
我正在尝试在 d3.js 中选择饼图布局中的弧，但我的选择不起作用。我想要做的是基于随机字符串“bafg”进行选择，如果一个字母与数据选择匹配，我希望突出显示该弧，然后让过渡动画适用于该选定弧。我尝试了不同的选择，但它们不起作用。这是一些在控制台中显示正在过滤条件的代码，但是如何使选择选择弧？只有第一个弧被选中。谢谢你的帮助！ https://jsfiddle.net/wheatgrass/abyubk4a/3/
` <html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>pie test</title>
<link rel="stylesheet" type="text/css" href="/camp/simon/s8.css">
<script src="/jquery/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/d3new/d3.js"></script>
<head>
<style>
#container {
position:absolute;
top:0px;
left:30%;
width:600px;
height: 600px;
border-style:solid;
border-width:2px;
border-color:blue;
}
#pieChart {
position:relative;
top:20px;
left:20%;
width:400px;
height: 400px;
border-style:solid;
border-width:2px;
border-color:red;
}
.onButton {
position:relative;
top:10px;
left:30%;
width: 20px;
height: 20px;
border-style:solid;
border-width:2px;
border-color:green;
}
#green {
color: green;
}
</style>
</head>
<body>
<script>
window.onload = function() {
var testString = 'bafg';
/*
############# PIE CHART ###################
-------------------------------------------
*/
function getRandomItem(){ //returns one letter in string
var aString;
list = ["a","b","f","g"];
var randomItems = function(list) {
return list[Math.floor((Math.random()*list.length))];
}
aString = randomItems(list);
console.log("returning aString ", aString );
return aString;
} //end getRandomItem
function pieChart(){
var dataset = [
{color: "blue", id:1, class:"blue", item: "b", amount: 25 },
{color: "yellow", id:2, class:"yellow", item: "a", amount: 25},
{color: "green", id:3,class:"green", item: "f", amount: 25},
{color: "red", id: 4,class:"red", item: "g", amount: 25}
]
;
var width = 400,
height = 400,
outerRadius = Math.min(width, height) / 2,
innerRadius = outerRadius * .999,
// for animation
innerRadiusFinal = outerRadius * .5,
innerRadiusFinal3 = outerRadius* .45
;
var vis = d3.select("#pieChart")
.append("svg:svg") //create the SVG element inside the <body>
.data([dataset]) //associate our data with the document
.attr("width", width) //set the width and height of our visualization (these will be attributes of the <svg> tag
.attr("height", height)
.append("svg:g") //make a group to hold our pie chart
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")") //move the center of the pie chart from 0, 0 to radius, radius
;
var arc = d3.svg.arc() //this will create <path> elements for us using arc data
.outerRadius(outerRadius).innerRadius(innerRadius);
// for animation
var arcFinal = d3.svg.arc().innerRadius(innerRadiusFinal).outerRadius(outerRadius);
var arcFinal3 = d3.svg.arc().innerRadius(innerRadiusFinal3).outerRadius(outerRadius);
var pie = d3.layout.pie() //this will create arc data for us given a list of values
.value(function(d) { return d.amount; }); //access the value of each element in our data array
var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
.data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
.enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
.append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
.attr("class", "slice") //allow us to style things in the slices (like text)
;
arcs.append("svg:path")
.attr("fill", function(d, i) {
return d.data.color; } ) //set the color for each slice to be chosen from the color function defined above
.attr("d", arc) //this creates the actual SVG path using the associated data (pie) with the arc drawing function
.attr("d", function(d,i) {
console.log("what in d,i",d,i);} )
;
d3.select("#onButton")
.on("click", function() {`enter code here`
var getItem = getRandomItem();
console.log('getItem', getItem);
console.log("clicked on button ");
arcs.filter(function (d) {
console.log("find pathnumber in d",d);
})
.attr('fill', 'black');
;
arcs.transition()
.duration(750)
.delay(10)
.attr("d", arcFinal )
.attr("startAngle", function(d, i) {
console.log("d", d);
if ( (d.startAngle === 0) &&
(getItem === d.data.item)) {
console.log("d.item", d.data.item);
console.log("item",getItem.charAt(0));
console.log("d.id",d.data.id);
return d.startAngle;
}
if ( (d.startAngle === 1.5707963267948968) &&
(getItem === d.data.item)) {
console.log("b showing");
console.log( d.data.item.charAt(0));
console.log("d.id",d.data.id)
return d.startAngle;
}
if ( (d.startAngle === 3.1415926535897936) &&
(getItem === d.data.item)) {
console.log(" f showing");
console.log( d.data.item.charAt(0));
console.log("d.id",d.data.id);
return d.startAngle;
}
if ( (d.startAngle === 4.712388980384691) &&
(getItem === d.data.item)) {
console.log("g showing ");
console.log( d.data.item.charAt(0));
console.log("after filter, d",d);
console.log("d.id",d.data.id);
return d.startAngle;
}
}) //end attr fill
.attr("d", arcFinal3)
.attr("stroke","orange")
.attr("stroke-width", 10)
;
d3.selectAll("g.slice").selectAll("path").transition()
.filter(function (d) { return d.startAngle; })
.attr("stroke","yellow")
.attr("stroke-width", 10)
.attr("d", arcFinal3)
.attr("fill", function (d,i) {
console.log("in transition d,i",d,i);
return d.data.color; })
;
d3.select("path")
.filter(function (d) { return d.startAngle; })
.attr("stroke","yellow")
.attr("stroke-width", 0)
.attr("d", arcFinal)
;
});
}
pieChart();
}; //end window onload
</script>
</body>
<div id="container" class="container-class" >
<div id="onButton" button type="button" placeholder="On" class="onButton" value="On" >
</div> <!--onbutton -->
<div id="pieChart">
</div>
</div> <!--container -->
<script type="text/javascript">
<div>
</html>
`
【问题讨论】：
标签： d3.js