一周前，我开始使用D3和JS。我正在尝试编写代码以呈现矩阵散布图。但是，这些点似乎没有显示出来。
以下为完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Matrix Scatter Plot </title>
<script type="text/javascript" src="d3/d3.js"></script>
<style type="text/css">
.axis--x path {
display: inline;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script type="text/javascript">
//Import data AJAX call:
d3.csv("data/old_cars.csv")
.then(function(data) {
// Getting Data.
rdata = {};
for(i = 0; i<data.length; i++){
tempdata = [];
tempdata.push({
mpg: +data[i].MPG,
horsepower: +data[i].Horsepower,
disp: +data[i].Displacement,
weight: +data[i].Weight
})
rdata[i] = tempdata;
}
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
//console.log(rdata)
// Setting Size. ------------------------------------------------------------------------
//-----------------------------------------------------------------------------------------
// Setting sizes.
columns = ["disp", "horsepower", "mpg", "weight" ];
console.log(columns)
width = 800;
padding = 15;
size = (width - (columns.length + 1) * padding) / columns.length + padding
n = columns.length;
// Setting Scales. ------------------------------------------------------------------------
//-----------------------------------------------------------------------------------------
var dispScale = data.map(d => +d.Displacement)
var horsepowerScale = data.map(d => +d.Horsepower)
var mpgScale = data.map(d => +d.MPG)
var weightScale = data.map(d => +d.Weight)
console.log(weightScale)
console.log(d3.max(weightScale))
XScale = [d3.scaleLinear().domain([d3.min(dispScale),d3.max(dispScale)]).rangeRound([padding / 2, size - padding / 2]),
d3.scaleLinear().domain([d3.min(horsepowerScale),d3.max(horsepowerScale)]).rangeRound([padding / 2, size - padding / 2]),
d3.scaleLinear().domain([d3.min(mpgScale),d3.max(mpgScale)]).rangeRound([padding / 2, size - padding / 2]),
d3.scaleLinear().domain([d3.min(weightScale),d3.max(weightScale)]).rangeRound([padding / 2, size - padding / 2])]
YScale = XScale.map(x => x.copy().range([size - padding / 2, padding / 2]));
//console.log(YScale);
var countryList = data.map(d => d.Origin).filter(onlyUnique);
var CScale = d3.scaleOrdinal().domain(countryList).range(["red", "green", "blue"]);
// Start Drawing.------------------------------------------------------------------------
//-----------------------------------------------------------------------------------------
// Outermost SVG------------------------------------------------------------------------
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", width)
.style("max-width", "100%")
.style("height", "auto");
// Define X Axis.------------------------------------------------------------------------
//-----------------------------------------------------------------------------------------
const axis = d3.axisBottom()
.ticks(6)
.tickSize(size * columns.length);
var XAxis = g => g.selectAll("g").data(XScale).join("g")
.attr("transform", (d, i) => "translate("+ (i * size) + ",0)")
.each( function(d) { return d3.select(this).call(axis.scale(d)); })
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick line").attr("stroke", "#ddd"));
//console.log(XAxis)
// Define Y Axis.------------------------------------------------------------------------
//-----------------------------------------------------------------------------------------
const axis1 = d3.axisLeft()
.ticks(6)
.tickSize(-size * columns.length);
var YAxis = g => g.selectAll("g").data(YScale).join("g")
.attr("transform", (d, i) => "translate("+ (i * size) + ",0)")
.each( function(d) { return d3.select(this).call(axis1.scale(d)); })
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick line").attr("stroke", "#ddd"))
// Call X Axis.------------------------------------------------------------------------
svg.append("g")
.call(XAxis);
svg.append("g")
.call(YAxis);
const cell = svg.append("g")
.selectAll("g")
.data(d3.cross(d3.range(columns.length), d3.range(columns.length)))
.join("g")
//.attr("transform", (k, l) => "translate("+ (k * size), (l * size)+")");
.attr("transform", function(d) { return "translate(" + (n - d[0] - 1) * size + "," + d[1] * size + ")"; })
cell.append("rect")
.attr("fill", "none")
.attr("stroke", "#aaa")
.attr("x", padding / 2 + 0.5)
.attr("y", padding / 2 + 0.5)
.attr("width", size - padding)
.attr("height", size - padding);
console.log(rdata[2])
console.log( XScale[1](rdata[2][0][columns[1]]));
console.log(rdata[2][0][columns[2]]);
cell.each(function([i, j]) {
d3.select(this).selectAll("circle")
.data(rdata)
.join("circle")
.attr("cx", d => XScale[i] (d[0][columns[i] ]) )
.attr("cy", d => YScale[j] (d[0][columns[j] ]) )
});
})
</script>
</body>
</html>
输出似乎未按需要呈现散点图矩阵。 另外，由于轴的原因，似乎有奇怪的线条显示。不知道发生了什么。我检查了比例尺，并定义了轴，但似乎无法根本原因，因此无法解决。
圆形SVG元素未显示。
我的数据示例如下：
[
{
"Car": "AMC Ambassador Brougham",
"MPG": "13",
"Displacement": "360",
"Horsepower": "175",
"Weight": "3821",
"Model": "73",
"Origin": "US"
},
{
"Car": "AMC Ambassador DPL",
"MPG": "15",
"Displacement": "390",
"Horsepower": "190",
"Weight": "3850",
"Model": "70",
"Origin": "US"
},
{
"Car": "AMC Ambassador SST",
"MPG": "17",
"Displacement": "304",
"Horsepower": "150",
"Weight": "3672",
"Model": "72",
"Origin": "US"
},
{
"Car": "AMC Concord",
"MPG": "19.4",
"Displacement": "232",
"Horsepower": "90",
"Weight": "3210",
"Model": "78",
"Origin": "US"
},
{
"Car": "AMC Concord",
"MPG": "24.3",
"Displacement": "151",
"Horsepower": "90",
"Weight": "3003",
"Model": "80",
"Origin": "US"
},
{
"Car": "AMC Concord d/l",
"MPG": "18.1",
"Displacement": "258",
"Horsepower": "120",
"Weight": "3410",
"Model": "78",
"Origin": "US"
},
{
"Car": "AMC Concord DL",
"MPG": "23",
"Displacement": "151",
"Horsepower": "0",
"Weight": "3035",
"Model": "82",
"Origin": "US"
},
{
"Car": "AMC Concord DL 6",
"MPG": "20.2",
"Displacement": "232",
"Horsepower": "90",
"Weight": "3265",
"Model": "79",
"Origin": "US"
}]