[英]d3.js - Pie chart with interactive legend hover problems
我用人口数据 popu 制作了 d3.js 饼图和相关图例。 当我将鼠标悬停在饼图段上时,我实现了放大相关的图例方形部分和饼图段本身(更大的外层半径)。 现在我正试图做相反的事情。 当我将鼠标悬停在图例方块上时,我还想放大方块本身和相关的饼图段。 类似于这里的示例https://www.amcharts.com/demos/pie-chart-with-legend/ 。 我将只写下与我遇到的饼图问题相关的部分代码。
var pie = d3.pie()
.value(function(d) {return d.pop})(popu);
var seg = d3.arc()
.innerRadius(100)
.outerRadius(150)
.padAngle(.1)
.padRadius(45);
var segover = d3.arc()
.innerRadius(100)
.outerRadius(170)
.padAngle(.1)
.padRadius(45);
所以这部分工作得很好。
svg.append("g")
.attr("class", "pieChart")
.attr("transform", "translate(1250,570)")
.selectAll("path")
.data(pie)
.append("path")
.attr("class", "pie")
.attr("id", function(d){return d.data.id})
.attr("d", seg)
.on("mouseenter", function(d){
d3.select(this)
.transition(10)
.duration(100)
.attr("d", segover)
})
然后我尝试在悬停在图例相关段上时更改饼图段。
var pieEl = svg.selectAll(".pie");
var piePath = pieEl.nodes();
svg.append("g")
.attr("class", "legend")
.attr("transform", "translate(-50,280)")
.selectAll(".mySquers")
.data(pie)
.enter()
.append("rect")
.attr("class", "rec")
.attr("x", 100)
.attr("y", function(d,i){ return 100 + i*25})
.attr("width", "15")
.attr("height", "15")
.attr("id", function(d,i){ return (popu[d,i].id)})
.style("fill",function(d,i){
if (this.id == piePath[i].id){
return piePath[i].getAttribute("fill")
}
})
.on("mouseenter", function(d){
for (var i=0; i<piePath.length; i++){
if (piePath[i].id == d.data.id){
piePath[i].setAttribute("d", segover);
}}
})
当我在 DOM 中使用 setAttribute("d", segover) 而不是像通常那样写为字符串的 d 属性时 (d="M144.58.....") 我有一个函数 (d="function(pie){ _e);}" 并在悬停饼段上消失。 但是,例如,如果我在悬停时将属性填充设置为红色,它会更改并绘制线段。 所以代码的符号是好的。 d3.arc() 生成的 d 路径是否存在某些我遗漏的行为? 欢迎任何建议。
我认为您应该将数据作为函数中的参数传递。 通常,直接返回函数时将其作为默认参数。
piePath[i].setAttribute("d", segover(*data associated with segment*));
svg.append("g")
.attr("class", "pieChart")
.attr("transform", "translate(1250,570)")
.selectAll("path")...
.attr("d", seg) // this is same as : attr("d", seg(d))
.on("mouseenter", function(d){
d3.select(this)
.transition(10)
.duration(100)
.attr("d", segover) // same here
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.