0
表示/非表示のシリーズ機能に凡例が追加されている間に新しい機能が必要なNVD3ドーナツチャートがあります。これを達成するために誰も助けてくれませんか？しかし、私は以下のデモで説明されているように追加機能を実現しました。しかし、デフォルトの凡例クリック機能は消えてしまった。私を助けてください..ありがとう。NVD3 - 既存の設定を上書きせずに凡例の追加機能を追加する
d3.select("g.nv-legendWrap").selectAll("g.nv-series")
.on("click.namespace", function (d) {
console.log("One needs to be handled " + d.label);
})
と
nv.addGraph(function() {
var donutChart = nv.models.pieChart()
\t \t .x(function(d) {
return d.label
})
\t \t .y(function(d) {
return d.value
})
\t \t .showLabels(true)
\t \t .showLegend(true)
\t \t .labelThreshold(.05)
\t \t .labelType("key")
\t \t .color(["#965251", "#00b3ca", "#7dd0b6", "#e38690", "#ead98b"])
\t \t
\t \t .donut(true)
\t \t .donutRatio(0.35);
\t // Insert text into the center of the donut
\t function centerText() {
\t \t \t return function() {
var svg = d3.select("svg");
\t \t var donut = svg.selectAll("g.nv-slice").filter(
function (d, i) {
return i == 0;
}
);
// Insert first line of text into middle of donut pie chart
donut.insert("text", "g")
.text("Line One")
.attr("class", "middle")
.attr("text-anchor", "middle")
\t \t .attr("dy", "-.55em")
\t \t .style("fill", "#000");
// Insert second line of text into middle of donut pie chart
donut.insert("text", "g")
.text("Line Two")
.attr("class", "middle")
.attr("text-anchor", "middle")
\t \t .attr("dy", ".85em")
\t \t .style("fill", "#000");
}
}
// Put the donut pie chart together
d3.select("#donut-chart svg")
.datum(seedData())
.transition().duration(300)
.call(donutChart)
.call(centerText());
//.call(pieSlice());
d3.select("g.nv-legendWrap").selectAll("g.nv-series")
.on("click", function (d) {
console.log("One needs to be handled " + d.label);
})
return donutChart;
});
// Seed data to populate donut pie chart
function seedData() {
return [
{
"label": "One",
"value": 25
},
{
"label": "Two",
"value": 25
},
{
"label": "Three",
"value": 25
},
{
"label": "Four",
"value": 25
},
{
"label": "Five",
"value": 25
}
];
}html, body, #donut-chart, .content{height:100%;width:100%;}
.content h1 {
font-weight: 300;
text-align: center;
}
svg {
width: 500px;
height: 500px;
margin: 0 auto;
text.middle {
font-family: Lato;
font-weight: 300;
font-size: 24px;
}
.nvd3.nv-pie .nv-pieLabels text {
font-family: Lato;
font-size: 18px;
font-weight: 300;
fill: #fff !important;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.js"></script>
<div class="content">
<h1>NVD3 Donut Pie Chart</h1>
<div id="donut-chart">
<svg></svg>
</div>
</div>
イベント名に「click.my」のような名前空間を追加できます。 http://stackoverflow.com/a/14753683を参照してください。 – altocumulus
altocumulus - それは働いた..ありがとう。これは単純なjavascriptのtweekかもしれませんが、私はそれを打ち負かされませんでした。 –
いいえ、それは標準のJS機能ではありません。これは代わりにD3によって処理されます。詳細については、APIドキュメントを確認してください。 – altocumulus