由于您拥有一个带有
x
和
y
位置的数据数组(“我拥有源点和目标点的x,y对”),因此您需要将它们转换为
angle
和
radius
。让我们看看如何做到这一点。
首先,让我们看一个固定坐标的示例。例如,假设您有以下数据数组,其中包括
x
和
y
位置:
var data = [{
source: {y: 150,x: 75
},
target: {y: 300,x: 0
}
}, {
source: {y: 150,x: 75
},
target: {y: 0,x: 0
}
}, {
source: {y: 150,x: 75
},
target: {y: 150,x: 150
}
}, ];
使用此链接生成器...
var link = d3.linkHorizontal()
.x(function(d) {
return d.y;
})
.y(function(d) {
return d.x;
});
...你将会得到这样的图表:
var data = [{
source: {
y: 150,
x: 75
},
target: {
y: 300,
x: 0
}
}, {
source: {
y: 150,
x: 75
},
target: {
y: 0,
x: 0
}
}, {
source: {
y: 150,
x: 75
},
target: {
y: 150,
x: 150
}
}, ];
var svg = d3.select("svg");
var link = d3.linkHorizontal()
.x(function(d) {
return d.y;
})
.y(function(d) {
return d.x;
});
svg.selectAll(null)
.data(data)
.enter()
.append("path")
.attr("fill", "none")
.attr("stroke", "blue")
.attr("d", link);
<script src="https://d3js.org/d3.v4.js"></script>
<svg></svg>
如何将此转换为数据集,以便与d3.linkRadial()
一起使用?
一种选项是迭代每个对象,使用基本三角学来填充angle
和radius
属性:
var radialData = data.map(function(d) {
return {
source: {
x: 0,
y: 0
},
target: {
x: Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) - Math.PI,
y: Math.sqrt((d.target.x - d.source.x) * (d.target.x - d.source.x) + (d.target.y - d.source.y) * (d.target.y - d.source.y))
}
};
});
然后,使用这个链接生成器:
var linkRadial = d3.linkRadial()
.angle(function(d) {
console.log(d)
return d.x;
})
.radius(function(d) {
return d.y;
});
我们将拥有这个:
var data = [{
source: {
y: 150,
x: 75
},
target: {
y: 300,
x: 0
}
}, {
source: {
y: 150,
x: 75
},
target: {
y: 0,
x: 0
}
}, {
source: {
y: 150,
x: 75
},
target: {
y: 150,
x: 150
}
}, ];
var svg = d3.select("svg");
var radialData = data.map(function(d) {
return {
source: {
x: 0,
y: 0
},
target: {
x: Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) - Math.PI,
y: Math.sqrt((d.target.x - d.source.x) * (d.target.x - d.source.x) + (d.target.y - d.source.y) * (d.target.y - d.source.y))
}
};
});
var g = svg.append("g")
.attr("transform", "translate(150,75)")
var linkRadial = d3.linkRadial()
.angle(function(d) {
return d.x;
})
.radius(function(d) {
return d.y;
});
g.selectAll(null)
.data(radialData)
.enter()
.append("path")
.attr("fill", "none")
.attr("stroke", "red")
.attr("d", linkRadial);
<script src="https://d3js.org/d3.v4.js"></script>
<svg></svg>
现在将两个生成器放在一起进行比较:
var data = [{
source: {
y: 150,
x: 75
},
target: {
y: 300,
x: 0
}
}, {
source: {
y: 150,
x: 75
},
target: {
y: 0,
x: 0
}
}, {
source: {
y: 150,
x: 75
},
target: {
y: 150,
x: 150
}
}, ];
var svg = d3.select("svg");
var link = d3.linkHorizontal()
.x(function(d) {
return d.y;
})
.y(function(d) {
return d.x;
});
svg.selectAll(null)
.data(data)
.enter()
.append("path")
.attr("fill", "none")
.attr("stroke", "blue")
.attr("d", link);
var radialData = data.map(function(d) {
return {
source: {
x: 0,
y: 0
},
target: {
x: Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) - Math.PI,
y: Math.sqrt((d.target.x - d.source.x) * (d.target.x - d.source.x) + (d.target.y - d.source.y) * (d.target.y - d.source.y))
}
};
});
var g = svg.append("g")
.attr("transform", "translate(150,75)")
var linkRadial = d3.linkRadial()
.angle(function(d) {
return d.x;
})
.radius(function(d) {
return d.y;
});
g.selectAll(null)
.data(radialData)
.enter()
.append("path")
.attr("fill", "none")
.attr("stroke", "red")
.attr("d", linkRadial);
<script src="https://d3js.org/d3.v4.js"></script>
<svg></svg>