D3.js 使用attrTween缩小d3雷达图形状

嗨，我想用attrTween做我的雷达图。 我为弧图做了这件事，所以我想把同样的逻辑应用到我的雷达图上，但没有成功

有人能告诉我我错过了哪一部分吗？ 我想在“点击”时缩小雷达图

代码如下

d3.selectAll('.btn').on('click', function(d) {
        let selectedone = d3.select(this).attr('class').split(' ')[1]
        console.log(selectedone);

        d3.select(`.radar${selectedone}`)
            .transition()
            .duration(1000)
            .attrTween('d', shrinkRadar(0))

        function shrinkRadar(target) {

            return function(d) {
                console.log(d)
                let interpolate = d3.interpolate(rscale(d.value), target)

                return function(t) {
                    console.log(d.radius);
                    d.radius = interpolate(t)
                    return radarLine(d)
                }
            }
        }

        // .attrTween('d',shrinkRadar(finalvalue))
    })

完整的代码在下面的链接中

---

你的雷达图的线函数采用一组数据来输出路径（线和区域填充）。不过，您正在尝试操作

attrween

，就像它在操作单个数据段而不是数组一样。看看这个快速重写：

function shrinkRadar(target) {
    return function(d) {    
        // create an array of interpolators
        // one for each point in the line
        // that run the value from starting to 0
        var interps = d.map( da => d3.interpolate(da.value, target));
        return function(t) {
            // for each point call it's interpolator
            // and re-assign the value
            d.forEach( (da,i) => {
              da.value = interps[i](t);
            });
            // regenerate path with new value
            return radarLine(d)
        }
    }
}

运行代码：

let margin={
前100名，
底数：100，
左:100,，
右：100
}
设width=Math.min（700，window.innerWidth-10）-margin.left-margin.right；
让高度=数学最小值（宽度，window.innerHeight-margin.top-margin.bottom-20）；
风险值数据=[
[//iPhone
{
轴：“电池寿命”，
数值：0.22
},
{
轴心：“品牌”，
数值：0.28
},
{
轴：“合同成本”，
数值：0.29
},
{
安讯士：“设计与质量”，
数值：0.17
},
{
axis：“具有互联网连接”，
数值：0.22
},
{
轴：“大屏幕”，
数值：0.02
},
{
轴：“设备价格”，
数值：0.21
},
{
axis：“成为智能手机”，
数值：0.50
}
],
[//三星
{
轴：“电池寿命”，
数值：0.27
},
{
轴心：“品牌”，
数值：0.16
},
{
轴：“合同成本”，
数值：0.35
},
{
安讯士：“设计与质量”，
数值：0.13
},
{
axis：“具有互联网连接”，
数值：0.20
},
{
轴：“大屏幕”，
数值：0.13
},
{
轴：“设备价格”，
数值：0.35
},
{
axis：“成为智能手机”，
数值：0.38
}
],
[//诺基亚智能手机
{
轴：“电池寿命”，
数值：0.26
},
{
轴心：“品牌”，
数值：0.10
},
{
轴：“合同成本”，
数值：0.30
},
{
安讯士：“设计与质量”，
数值：0.14
},
{
axis：“具有互联网连接”，
数值：0.22
},
{
轴：“大屏幕”，
数值：0.04
},
{
轴：“设备价格”，
数值：0.41
},
{
axis：“成为智能手机”，
数值：0.30
}
]
];
var color=d3.scaleOrdinal（）
.范围（['#6678D9'、'#61F06C'、'#FF36AA']））
var radarChartOptions={
w：宽度，
h:身高，
保证金：保证金，
最大值：0.5，
级别：5，
圆划：是的，
颜色：颜色
};
//蓝色，绿色，粉红色
雷达艺术（'.RadarChart'，数据，雷达艺术选项）
功能RadarChart（id、数据、选项）{
设cfg={
w:600，
h:600，
保证金：{
前20名，
右:20,，
底数：20，
左：20
},
级别：3，
最大值：0，
labelFactor:1.25，
愤怒面：60，
不透明度：0.35，
点半径：4，
不透明圈：0.1，
冲程宽度：2，
回击：错，
颜色：['#6678D9'，'#61F06C'，'#FF36AA']
}
如果（'undefined'！==选项类型）{
对于（选项中的var i）{
if（'undefined'！==选项类型[i]）{
cfg[i]=期权[i]；
}
}//对我来说
}//如果
//   결론적으로 选择权에 들어가있는 녀석과 함수에있는 녀석을 매치시키는것
var最大值=
//Math.max（cfg.maxValue，
d3.最大值（数据、，
（i） =>d3.max(
i、 映射（（o）=>o.value）
// 벨류로 이루어진 어레이를 만들고, 그 어레이에서 최대값을 출력해낸다.
)
)
// )
var allAxis=数据[0]。映射（（d）=>{
返回d轴
})
var total=allAxis.length，
半径=数学最小值（cfg.w/2，cfg.h/2），
Format=d3.Format（'%'），
angleSlice=Math.PI*2/总计
var rscale=d3.scaleLinear（）
.范围（[0，半径]）
.domain（[0，maxValue]）
d3.select（id）.select（'svg'）.remove（）
var svg=d3.select（id.append（'svg'））
.attr（'width'，cfg.w+cfg.margin.left+cfg.margin.right）
.attr（'height'，cfg.h+cfg.margin.top+cfg.margin.bottom）
.attr（'类'，
“雷达”+id）；
var g=svg.append（'g'）.attr（'transform'，'translate（${cfg.w/2+cfg.margin.left}，${cfg.h/2+cfg.margin.top}）`）
var filter=g.append（'defs'）。append（'filter'）。attr（'id'，'glow'））
var feGaussianBlur=filter.append（'feGaussianBlur'）.attr（'stdDeviation'，'2.5'））
.attr（'result'，'coloredBlur'）
var feMerge=filter.append（'feMerge'）
var feMergeNode1=feMerge.append（'feMergeNode'）.attr（'in'，'coloredBlur'））
var feMergeNode2=feMerge.append（'feMergeNode'）.attr（'in'，'SourceGraphic'））
var axisGrid=g.append（'g'）.attr（'class'，'axisWrapper'））
axisGrid.selectAll（'.levels'）。数据(
d3.范围（1，（cfg.levels+1））
)
.join（'圆'）
.attr（'class'，'gridCircle'）
.attr（'r'，（d）=>{
返回半径/cfg.levels*d
})
.style（'fill'，'#CDCDCD'）
.style（'stroke'，'#CDCDCD'）
.style（'fill-opacity'，cfg.opacityCircles）
.style（'filter'、'url（#glow'））
axisGrid.selectAll（'.axisLabel'）
.数据（d3.范围（1级+1级））
.join（'text'））
.attr（'class'，'axisLabel'）
.attr（'x'，4）
.attr（'y'，（d）=>{
返回-d*半径/cfg.levels
})
.attr（'dy'，'0.4em'））
.style（'font-size'，'10px'）
.attr（'填充'，'#7373'）
.text（（d，i）=>{
返回格式（maxValue*d/cfg.levels）
})
var axis=axisGrid.selectAll（“.axis”）
.数据（allAxis）
.join（'g'））
.attr（'类'，'轴'）
axis.append（'行'）
.attr（'x1'，0）
.attr（'y1'，0）
.attr（“x2”，函数（d，i）{
返回rscale（maxValue*1.1）*Math.cos（angleSlice*i-Math.PI/2）；
})
.attr（“y2”，函数（d，i）{
返回rscale（maxValue*1.1）*Math.sin（angleSlice*i-Math.PI/2）；
})
.attr（“类”、“行”）
.style（“笔划”、“白色”）
.样式（“笔划宽度”、“2px”）；
A.