简介
总所周知我们所处的地方是3维世界，所以如何直观的显示多维的数据是一个比较困难的事情，所以 主要是项目中要用到~~ ；）
参考链接
https://blog.csdn.net/qq_44702847/article/details/103154088
https://observablehq.com/@d3/parallel-coordinates?collection=@observablehq/visualization
废话不多说 上代码
<!--
* @Author: your name
* @Date: 2020-04-26 08:29:53
* @LastEditTime: 2020-04-26 16:09:36
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: gitlab测试平行坐标index.html
-->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#myau{
}
</style>
<body>
<script src="./d3.js"></script>
<script src="./index.js"></script>
<svg id="mysvg"></svg>
<script>
// var data = d3.csvParse(await FileAttachment('cars.csv').text() , d3.autoType)// 从服务器拿数据的方式
var data = [];
var height = 500;
margin = ({top: 20, right: 10, bottom: 20, left: 10})
var data = d3.csv("cars.csv").then(function (d) {
data = d;
var keys = data.columns.slice(1)
data.forEach(element => {
for(var i=0; i<keys.length; i++){
if(+element[keys[i]] === +element[keys[i]]){
element[keys[i]] = +element[keys[i]];
}
}
});
init();
}
)
function init(){
var keys = data.columns.slice(1)
var y = new Map(
Array.from(
keys,
key => [key, d3.scaleLinear(d3.extent(data, d => d[key]), [margin.top, height - margin.bottom])]
)
)//简历一个比例尺缩放， 对于每个keys所对应的数据从大到小 对应于坐标轴的 长和宽度
var width = keys.length * 120
var x = d3.scalePoint(keys, [margin.left+20, width - margin.right - 20])
var svg = d3.select("#mysvg")
.attr("width", width)
.attr("height", height)
for(var i=0; i < keys.length; i++){
var keyz = keys[i];
var z = d3.scaleSequential(y.get(keyz).domain().reverse(), d3.interpolateRainbow)//d3.interpolateBrBG 配色方案 interpolateRainbow 彩虹图
svg
.append('g')
.attr('fill', 'none')
.attr('stroke-width', 1.5)
.selectAll('path')
.data(data.slice().sort((a, b) => d3.ascending(+a[keyz], +b[keyz])))
.join('path')
.attr('stroke', d => z(d[keyz]))
.attr('stroke-opacity', 0.4)
.attr('d', d =>// 画线核心
d3
.line()
.defined(([, value]) => value != null)
.y(([key, value]) => y.get(key)(value))
.x(([key]) => x(key))(d3.cross(keys, [d], (key, a) => [key, a[key]]))
)
.append('title')
.text(d => d.name);
svg
.append('g')
.selectAll('g')
.data(keys)
.join('g')
.attr('transform', d => `translate(${x(d)}, 0)`)
.each(function(d) {
let kee = y.get(d)
console.log(kee)
d3.select(this).call(d3.axisRight(kee));
})
.call(g =>
g
.append('text')
.attr('x', -5 )
.attr('y', `${height-5} `)
.attr('text-anchor', 'start')
.attr('fill', 'currentColor')
.text(d => d)
)
.call(g => // 外边框变白
g
.selectAll('text')
.clone(true)
.lower()
.attr('fill', 'none')
.attr('stroke-width', 5)
.attr('stroke-linejoin', 'round')
.attr('stroke', 'white')
);
}
}
</script>
</body>
预览图
