nvd3中一列中饼图的垂直图例
Posted
技术标签:
【中文标题】nvd3中一列中饼图的垂直图例【英文标题】:Vertical legend in pieChart in one column in nvd3 【发布时间】:2015-12-13 09:20:39 【问题描述】:我需要 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 + ')');
);
它有效,但如果我单击图例来更新它 - 图例返回到起始位置(几列)。
JSFiddle example
【问题讨论】:
我也在寻找类似的东西。你能把它添加到 jsFiddle/plunkr 吗?我想破解它 @jusopi 添加了 JSFiddle 示例 【参考方案1】:我知道这是一个老问题,但我有同样的问题并最终来到这里。没有一个答案对我有用,但我能够修改 Ranijth 的答案并让它工作(并且看起来不错)。
else if (legendPosition === "vertical")
var pad=50;
var legendWidth=150; //might need to change this
legend.height(availableHeight).key(pie.x());
legend.width(legendWidth);
wrap.select('.nv-legendWrap')
.datum(data)
.call(legend)
.attr('transform', 'translate('+ ((availableWidth / 2)+legendWidth+pad)+','+pad+')');
Pie Chart with Vertical Legend
【讨论】:
【参考方案2】:快速破解。
修改 nv.d3.js 第 11149 行(其他版本可能不同)
// Legend
if (showLegend)
if (legendPosition === "top")
添加另一个垂直选项
else if (legendPosition === "vertical")
var legendWidth = nv.models.legend().width();
var positionY = 10;
var positionX = availableWidth - 200;
var verticalOffset = 20;
if ( margin.top != legend.height())
margin.top = legend.height();
availableHeight = nv.utils.availableHeight(height, container, margin);
legend.width(200);
// legend.height(availableHeight).key(pie.x());
positionY += verticalOffset;
wrap.select('.nv-legendWrap')
.datum(data)
.call(legend)
.attr('transform', 'translate(' + positionX + ',' + positionY + ')');
也可以玩变量。 与 Legends 配合得非常好。对于一个很长的传说列表。更多的逻辑想要应用。
【讨论】:
【参考方案3】:解决方法是为每次单击和双击 .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>
【讨论】:
修复了 sn-p。如果有任何问题,只需将代码复制到您的 JSFiddle 示例并运行它。以上是关于nvd3中一列中饼图的垂直图例的主要内容,如果未能解决你的问题,请参考以下文章
echarts中饼图的legend自定义icon图片(扇形为例)