[英]How can i add an image inside nvd3 piechart slices?
我想在nvd3餅圖切片中添加一個圖標。 我要這個:
有幫助嗎?
編輯:
餅圖的html代碼是:
<g class="nv-pieWrap">
<g class="nvd3 nv-wrap nv-pie nv-chart-9221" transform="translate(0,0)">
<g>
<g class="nv-pie" transform="translate(270,145.5)">
<g class="nv-slice" fill="#3b5998" stroke="#3b5998"><path d="M7.127208979246237e-15,-116.4A116.4,116.4 0 0,1 115.55131294501349,-14.030469581719618L72.21957059063342,-8.769043488574761A72.75,72.75 0 0,0 4.454505612028897e-15,-72.75Z"></path></g>
<g class="nv-slice" fill="#326ada" stroke="#326ada"><path d="M115.55131294501349,-14.030469581719618A116.4,116.4 0 1,1 -1.2476559499083328e-13,-116.4L-7.79784968692708e-14,-72.75A72.75,72.75 0 1,0 72.21957059063342,-8.769043488574761Z"></path></g>
</g>
<g class="nv-pieLabels" transform="translate(270,145.5)"></g></g></g></g>
閱讀本文后如何在nvd3餅圖圖例中添加圖像?
我在我的數據中添加了一個image_path,並添加了js這段代碼
var slices = wrap.select('.nv-pie').selectAll('.nv-slice')
.data(pie);
var ae = slices.enter().append('g')
.attr('class', 'nv-slice')
.on('mouseover', function(d,i){
d3.select(this).classed('hover', true);
dispatch.elementMouseover({
label: getX(d.data),
value: getY(d.data),
point: d.data,
pointIndex: i,
pos: [d3.event.pageX, d3.event.pageY],
id: id
});
})
.on('mouseout', function(d,i){
d3.select(this).classed('hover', false);
dispatch.elementMouseout({
label: getX(d.data),
value: getY(d.data),
point: d.data,
index: i,
id: id
});
})
.on('click', function(d,i) {
dispatch.elementClick({
label: getX(d.data),
value: getY(d.data),
point: d.data,
index: i,
pos: d3.event,
id: id
});
d3.event.stopPropagation();
})
.on('dblclick', function(d,i) {
dispatch.elementDblClick({
label: getX(d.data),
value: getY(d.data),
point: d.data,
index: i,
pos: d3.event,
id: id
});
d3.event.stopPropagation();
});
/////////////I ADDED THIS APPEND
ae.append('image')
.attr('xlink:href', function(d) { return d.image_path} )
.attr('height',16)
.attr('width',16)
.attr('y', '-10')
.attr('x', '8');
///////////////////////////////
slices
.attr('fill', function(d,i) { return color(d, i); })
.attr('stroke', function(d,i) { return color(d, i); });
var paths = ae.append('path')
.each(function(d) { this._current = d; });
//.attr('d', arc);
如果你想破解nv.d3.js
代碼來允許這個, nv.d3.js
需要幾個步驟。
為數據集中的每個元素定義圖像路徑:
var testdata = [
{
key: "<img src="+"./imgs/facebook.jpg"+">",
y: 1,
image_path: "./imgs/facebook.jpg"
},
{
key: "<img src="+"./imgs/twitter.jpg"+">",
y: 2,
image_path: "./imgs/twitter.jpg"
}];
然后用這樣的東西更新nv.models.pie
代碼......
為圖像添加錨點:
pieLabels.enter().append("g").classed("nv-label",true)
...
group.append('text')
.style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned
.style('fill', '#000')
// Set up the anchor for the image
group.append('image')
.attr('height', 20)
.attr('width', 20)
.attr('y', '-10')
.attr('x', '-10');
隱藏文本標簽並顯示圖像:
// Don't insert the label text. We're using images.
// pieLabels.select(".nv-label text")
// .style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned
// .text(function(d, i) {
// var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
// var labelTypes = {
// "key" : getX(d.data),
// "value": getY(d.data),
// "percent": d3.format('%')(percent)
// };
// return (d.value && percent > labelThreshold) ? labelTypes[labelType] : '';
// });
// Show the image if the slice is large enough
pieLabels.select(".nv-label image")
.attr('xlink:href', function(d, i) {
var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
return (d.data.image_path && percent > labelThreshold) ? d.data.image_path : '';
});
您可能需要根據需要調整一些數字。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.