- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在 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>
看完这篇How can i add an image in nvd3 piechart legend?
我在我的数据中添加了一个 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
代码以实现此目的,只需几步即可。
定义数据集中每个元素的图片路径:
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
代码...
为图片添加 anchor :
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 : '';
});
您可能需要根据需要稍微调整数字。
关于javascript - 如何在 nvd3 饼图切片中添加图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20428403/
[INFO] [INFO] --- dependency-check-maven:4.0.2:check (default) @ realtimePaymachine --- [INFO] Centr
我开始从 NVD XML 提要转向 JSON 提要(因为从 2019 年 10 月起不再支持 XML)。现在我很难理解这些标签及其使用目的。 例如: “配置”中的“运算符(operator)”标签有什
我的 IT 产品已定义 CPE,例如:cpe:/o:microsoft:windows_vista:6.0:sp1:~-~home_premium~-~x64~- 我正在使用 NVD 数据源来获取所有
我们正在使用 jQuery,我在国家漏洞数据库中发现了以下 jQuery 漏洞: http://web.nvd.nist.gov/view/vuln/detail?vulnId=CVE-2007-23
我正在尝试下载 NVD CVE。这是我的Python代码: import requests import re r = requests.get('https://nvd.nist.gov/vuln/
目前我正在使用 Angular-nvd3 图形来显示数据。但是,堆叠面积图 nvd3 图形类型正在切断数字和轴标签。模板图可查看here 。 y 轴数字和标签是主要关注点。下面是图形选项代码和问题的图
我们在项目中遇到以下错误,该URL何时返回? > Task :dependencyCheckAnalyze Verifying dependencies for project cckm-app
我在gitlab管道中使用gradle:5.6.2-jdk8 docker镜像。 gradle clean build 上面的命令因错误而失败: 无法下载元文件:https://nvd.nist.go
我是一名优秀的程序员,十分优秀!