0
で作業していないフィルタが機能していません。私は何をしたいのランダムな文字列「BAFG」に基づいて選択され、1つの文字がデータ選択に一致した場合、私は、アークが強調表示し、その選択したアークのために働い遷移アニメーションを取得することにしたいです。私は別の選択肢を試してみて、うまくいきません。ここでは条件がフィルタリングされているが、どのように私は選択が弧を選んで作るのですかコンソールに示し、いくつかのコードがありますか？最初のアークのみが選択されます。助けてくれてありがとう！ https://jsfiddle.net/wheatgrass/abyubk4a/3/選択と私はd3.jsと私の選択でパイレイアウトの弧の選択をしようとしていますd3.js円グラフ
` <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>
`