1
D3-PIEチャートのARCに
- は個人IDを添付各スライスに-Tagだけでなく、データ・セット（さまざまな要素を持つマトリックス）
マイコードは今、この
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
transition: fill 250ms linear;
transition-delay: 150ms;
}
path:hover {
fill: #999;
stroke: #000;
transition-delay: 0;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var data = {
{"year":"2017-07-01","value":"1"},
{"year":"2017-07-02","value":"1"},
{"year":"2017-07-03","value":"2"},
{"year":"2017-07-04","value":"3"},
{"year":"2017-07-05","value":"5"},
{"year":"2017-07-06","value":"8"},
{"year":"2017-07-07","value":"13"},
{"year":"2017-07-08","value":"21"},
{"year":"2017-07-09","value":"24"},
{"year":"2017-07-10","value":"55"},
{"year":"2017-07-11","value":"89"},};
var width = 960,
height = 500;
arc_ids = d3.range(data.length); // for naming the arcs
var outerRadius = height/2 - 20,
innerRadius = outerRadius/3,
cornerRadius = 10;
var pie = d3.layout.pie()
.padAngle(.02);
var arc = d3.svg.arc()
.padRadius(outerRadius)
.innerRadius(innerRadius);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("id","viz_pieChart") // adds an ID to the whole chart
.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")");
svg.selectAll("path")
.data(pie(data.map(function(d) { return parseInt(d.value); })))
.attr("id", function(d, i) { console.log('CP1'); return "arc-" + arc_ids[i]; }) // This was intended to add an individual id to each arc, but it doesn't
.attr("data", function(d) { return d.data; }) // attach data to arc according to value, as e.g.: {"year":"2017-07-01","value":"1"}
.enter().append("path")
.each(function(d) {
d.outerRadius = outerRadius - 20;
})
.attr("d", arc)
.on("mouseover", arcTween(outerRadius, 0))
on("click", function(d){console.log(d.id);console.log(d.data.toString())}); //print id of the clicked arc as well as saved data
.on("mouseout", arcTween(outerRadius - 20, 150));
function arcTween(outerRadius, delay) {
return function() {
d3.select(this).transition().delay(delay).attrTween("d", function(d) {
var i = d3.interpolate(d.outerRadius, outerRadius);
return function(t) {
d.outerRadius = i(t);
return arc(d);
};
});
};
}
//test whether an arc can be reached, e.g. the 2nd Element
console.log(document.getElementById('slice-1')); // gives an error
</script>彼らは有望に思えたとして、私はまたthis1、this2とthis3をチェックし、それはまだ私のために動作しません。
その後、別のSVGグラフィックに印刷するために、アークの添付データを使用したいと思います。しかし、最初に挑戦しなければなりません。
post複数ご不明な点がありましたら、ご容赦ください。
ありがとうございました！
を与えるパスを追加する必要がありますあなたは何をしたいか言ってきましたが、あなたの質問は何ですか？投稿されたコードに何か問題がありますか？それは何の出力ですか？希望の出力は何ですか？ – tima
ありがとう、私はより正確なコードと同様に私の質問をした。 コードは機能しません。特に、アークあたりのIDとデータの付加/書込みは機能しません。 – Tanoshimi
各アークのIDは で返すことができます。 "arc-" + i; 次に、あなたはアーク1、アーク2、アーク3、などのIDを取得します。 –