作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 json 数据创建一个饼图..弧线创建得很好,但它们没有采用我给出的颜色和文本它解析 json 数据并获取值,但不会为不同的名称返回不同的颜色...文本的情况也类似..但是当我尝试在控制台中打印时,它会打印......这是我的代码
function drawPiechart( dataurl, selector ){
var width = 130,
height = 130,
radius = Math.min(width, height) / 2;
var color = d3.scale.category20();
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
/*var arc1 = d3.svg.arc()
.outerRadius(radius + 10)
.innerRadius(0);*/
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.workload; });
var svg = d3.select(selector).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
d3.json(dataurl, function(error, data) {
console.log(data);
data.HubActivity.hubWorkloadList.forEach(function(d) {
d.workload = +d.workload;
console.log(d.workload);
});
/*function animateFirstStep(){
d3.select(this)
.transition()
.delay(0)
.duration(1000)
.attr("d",arc1)
.each("end", animateSecondStep);
};
function animateSecondStep(){
d3.select(this)
.transition()
.duration(1000)
.attr("d", arc);
};*/
var g = svg.selectAll(".arc")
.data(pie(data.HubActivity.hubWorkloadList))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.trName); });
// .on("mouseover", animateFirstStep);
g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("text-anchor", "middle")
.style("fill","black")
.text(function(d) { console.log( d.workload); });
});
};
drawPiechart( "../data/pie0.json", "#workload");
这是我的 json 数据
{
"HubActivity": {
"hubWorkloadList": [
{
"trName": "addAccessDateValue",
"workload": "20.00"
},
{
"trName": "addAddress",
"workload": "10.00"
},
{
"trName": "getAccessDateValue",
"workload": "10.00"
},
{
"trName": "getAddress",
"workload": "10.00"
},
{
"trName": "searchCategory",
"workload": "10.00"
},
{
"trName": "searchCategoryHierarchy",
"workload": "10.00"
},
{
"trName": "updateAccessDateValue",
"workload": "30.00"
},
{
"trName": "updateAddressNote",
"workload": "10.00"
},
{
"trName": "updateAddressValue",
"workload": "10.00"
},
{
"trName": "updateAlert",
"workload": "10.00"
}
]
}
}
请告诉错误出在哪里......
最佳答案
d3.layout.pie
函数创建一个新的数据结构,其中包含在顶层绘制图表所需的信息。这就是您在选择颜色和附加文本时要使用的内容,这就是它不起作用的原因 - 您要查找的数据不再在原来的位置。
在 pie()
返回的每个元素中,都有一个包含原始数据的 .data
成员。使用它,您可以访问您正在查找的信息。也就是说,你需要改变
.style("fill", function(d) { return color(d.trName); });
至
.style("fill", function(d) { return color(d.data.trName); });
文本也类似。
关于javascript - 饼图 d3.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15264575/
有人可以帮我理解为什么我的饼图百分比计算不正确吗?看截图: 根据我的计算,如 RHS 上所示,支出百分比应为 24.73%。传递给 Highcharts 的值如下:- 花费:204827099.36-
我正在制作圆环饼图。 我设置数据的颜色并获取钻取(它是保存外部切片的数据和配置的对象)切片的颜色为同一组颜色。我想设置要在向下钻取对象中使用的不同颜色数组。请参阅附图(外层切片有两种颜色:橙色和透明)
我是一名优秀的程序员,十分优秀!