0
こんにちは、私はd3jsで新しくなっていますので、円グラフのコードでmouseoverイベントを使用することができません。 mouseoverイベントとラベルを表示するいくつかのクラス?ここで円グラフでマウスオーバーを使用し、ラベルをd3 v3で表示します。
は、私は円グラフを描画するために使用していたコードです:
var w = 300;
var h = 300;
var dataset = [
{"year":"2017-07-01","value":"5"},
{"year":"2017-07-02","value":"10"},
{"year":"2017-07-03","value":"15"},
{"year":"2017-07-04","value":"20"},
{"year":"2017-07-05","value":"25"},
{"year":"2017-07-06","value":"30"},
{"year":"2017-07-07","value":"35"},
{"year":"2017-07-08","value":"40"},
{"year":"2017-07-09","value":"45"},
{"year":"2017-07-10","value":"50"},
{"year":"2017-07-11","value":"55"},
{"year":"2017-07-12","value":"60"},
{"year":"2017-07-13","value":"65"},
{"year":"2017-07-14","value":"70"}
];
var outerRadius = w/2;
var innerRadius = 0;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var pie = d3.layout.pie()
.value(function(d) {
return d.value;
});
var color = d3.scale.category20();
var svg = d3.select("#chart")
.append("svg")
.attr("width", w)
.attr("height", h);
var arcs = svg.selectAll("g.arc")
.data(pie(dataset))
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
arcs.append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc);
arcs.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d) {
return d.value;
});
どのラベルを表示しますか?パイのスライスにはすでに値がありますか?または別のラベル?ユーザーがスライス上にマウスを移動したとき、またはユーザーがパイ全体にカーソルを合わせたときあなたは、適切な助けを得るために、あなたが念頭に置いているものを正確に説明しなければならないことが分かります。 * "ラベルを表示したい" *はかなり曖昧です。 –
私はマウスオーバーで値を表示する必要があります – kunal
まあ、私はちょうどあきらめます。がんばろう。 –