gpt4 book ai didi

legend - nvd3中一列中饼图的垂直图例

转载 作者:行者123 更新时间:2023-12-01 15:12:16 26 4
gpt4 key购买 nike

我需要 PieChart 中的垂直图例。现在库仅提供 2 个选项:顶部/右侧。如果使用正确 - 图例在几列中。我需要一列中的图例。

我发现了一个 hack - 正确的变换值并将图例放在一列中。

  var positionX = 30;
var positionY = 30;
var verticalOffset = 25;

d3.selectAll('.nv-legend .nv-series')[0].forEach(function(d) {
positionY += verticalOffset;
d3.select(d).attr('transform', 'translate(' + positionX + ',' + positionY + ')');
});

Example

它有效,但如果我单击图例进行更新 - 图例返回到起始位置(几列)。 enter image description here

JSFiddle example

最佳答案

解决方法是为每次单击和双击 .nv-legend 更新图例。

(function() {
var h = 600;
var r = h / 2;
var arc = d3.svg.arc().outerRadius(r);

var data = [{
"label": "Test 1",
"value": 74
}, {
"label": "Test 2",
"value": 7
}, {
"label": "Test 3",
"value": 7
}, {
"label": "Test 4",
"value": 12
}];


var colors = [
'rgb(178, 55, 56)',
'rgb(213, 69, 70)',
'rgb(230, 125, 126)',
'rgb(239, 183, 182)'
]


nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.color(colors)
.showLabels(true)
.labelType("percent");

d3.select("#chart svg")
.datum(data)
.transition().duration(1200)
.call(chart);

var svg = d3.select("#chart svg");

function updateLegendPosition() {
svg.selectAll(".nv-series")[0].forEach(function(d, i) {
d3.select(d).attr("transform", "translate(0," + i * 15 + ")");
})
}
svg.select('.nv-legend').on("click", function() {
updateLegendPosition();
});

svg.select('.nv-legend').on("dblclick", function() {
updateLegendPosition();
});

updateLegendPosition();

return chart;
});


}())
@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);

#chart svg {
height: 600px;
}

.nv-label text{
font-family: Droid Sans;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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.1.15-beta/nv.d3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>


<div id="chart">
<svg></svg>
</div>

关于legend - nvd3中一列中饼图的垂直图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32614516/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com