D3在工具提示中添加甜甜圈图表
D3 adding donut chart within a tooltip
我试图在工具提示中显示一个甜甜圈图。我认为这将只是简单地添加函数名或创建图表内。html(),但事实并非如此可悲。谁能告诉我我哪里做错了?
下面是我的代码:
tooltip.select('.label').html(donutChart());
function donutChart(){
var dataset = {
hddrives: [20301672448, 9408258048, 2147483648, 21474836480, 35622912,32212254720],
};
var width = 460,
height = 300,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#2DA7E2"]);
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 70);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var path = svg.selectAll("path")
.data(pie(dataset.hddrives))
.enter().append("path")
.attr("class", "arc")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
svg.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.attr("class", "inside")
.text(function(d) { return 'Test'; });
}
您的函数donutChart
将<svg>
附加到正文中,而不是在工具提示中。
一个解决方案可以写在你的.html()
:
.html("<h1>My Donut Chart</h1><br><svg class='myDonut'></svg>")
然后在这行之后调用您的donutChart
,记住更改您的var svg
:
var svg = d3.select(".myDonut")
注意不要重复相同的变量名,即使它们在函数内(单独的作用域)…这会造成不必要的混淆。
相关文章:
- 在Javascript甜甜圈图的PHP变量中引用PHP变量
- 装订莫里斯甜甜圈图
- Highcharts甜甜圈工具提示格式使用钻取数据
- D3将两张甜甜圈图叠加在一起
- 如何使高图表半甜甜圈出现在角度应用中
- 莫里斯.js甜甜圈标签不在中间的jquery标签中
- 强制 ChartJS 显示具有空值的甜甜圈图
- 无法从图表.js调整甜甜圈图的大小
- GWT Highcharts-半圆甜甜圈
- d3.js甜甜圈图::其他路径被渲染而不更新
- Morris甜甜圈图的设置数据
- 甜甜圈饼图NVD3
- 饼(甜甜圈)图分段顺序在D3
- 在morris.js中触发甜甜圈片段的点击事件
- angular (1.5) nvd3嵌套甜甜圈
- 甜甜圈图d3.js
- 添加一个标题到甜甜圈图
- React + chart. js 2.0:如何在甜甜圈图中添加标签
- 如何将事件侦听器添加到除了已定义的甜甜圈(或环)之外的整个窗口
- D3在工具提示中添加甜甜圈图表