Javascript Javascrip；d3.js-为什么我不能创建热图？
我正在尝试创建一个热图。但我能做的只是显示一个矩形。我的代码有什么问题？我试过很多东西，但还是不起作用。有人能帮我吗 我的代码中没有任何错误，但仍然是错误的。天使应该用不同的颜色来填充。 这是我目前的代码：Javascript Javascrip；d3.js-为什么我不能创建热图？,javascript,d3.js,Javascript,D3.js,我正在尝试创建一个热图。但我能做的只是显示一个矩形。我的代码有什么问题？我试过很多东西，但还是不起作用。有人能帮我吗 我的代码中没有任何错误，但仍然是错误的。天使应该用不同的颜色来填充。 这是我目前的代码： <!DOCTYPE html> <meta charset="utf-8" /> <title>test</title> <style> body { margin: 50px; font-f
<!DOCTYPE html>
<meta charset="utf-8" />
<title>test</title>
<style>
body {
margin: 50px;
font-family: Arial;
}
</style>
<body>
<p>First Tutorial</p>
<script src="https://d3js.org/d3.v6.js"></script>
<div id="container"> </id>
<script>
/* JavaScript */
var data = [
[2.56, 8.52, 4.92, 2.58, 8.44, 2.29],
[7.94, 8.42, 7.71, 7.0, 8.13, 5.63],
[1.38, 3.29, 2.38, 2.85, 1.38, 1.77],
[1.31, 2.48, 1.04, 1.21, 1.83, 1.48],
[1.58, 8.19, 4.75, 3.38, 4.83, 1.46],
[4.48, 4.08, 4.13, 1.73, 1.37, 2.58], ];
var rowLabels = [
"rowOne",
"rowTwo",
"rowThree",
"rowFour",
"rowFive",
"rowSix",
];
var columnLabels = [
"columnOne",
"columnTwo",
"columnThree",
"columnFour",
"columnFive",
"columnSix",
];
const mapData = data.reduce((res, item, index) => {
const group = rowLabels[index];
item.forEach((value, colIndex) => {
res.min = Math.min(value, res.min);
res.max = Math.max(value, res.max);
res.data.push({group, variable: columnLabels[colIndex], value});
});
return res;
}, {data: [], min: Number.POSITIVE_INFINITY, max: Number.NEGATIVE_INFINITY});
/* Layout constants */
var margin = {top: 0, right:0, bottom: 90, left: 80},
width = 960- margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
/* Initialization of SVG graphics */
var svg = d3.select("#container")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//X Scale and Axis:
var x= d3.scaleBand()
.range([ 0, width ])
.domain(columnLabels)
.padding(0.01);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "translate(-10,10) rotate(-45)")
.style("text-anchor", "end")
.style("font-size", 10)
// Y scales and Axis:
var y= d3.scaleBand()
.range([ height, 0 ])
.domain(rowLabels)
.padding(0.01);
svg.append("g")
.call(d3.axisLeft(y))
var myColor = d3.scaleLinear()
.range(["#0000ff", "#00ff00"])
.domain([mapData.min,mapData.max])
svg.selectAll()
.data(mapData.data, function(d) {return d.group+':'+d.variable;})
.enter()
.append("rect")
.attr("x", function(d) { return x(d.group) })
.attr("y", function(d) { return y(d.variable) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) { return myColor(d.value)} )
</script>
</body>
测试
身体{
利润率：50像素；
字体系列：Arial；
}
第一教程
/*JavaScript*/
风险值数据=[
[2.56, 8.52, 4.92, 2.58, 8.44, 2.29],
[7.94, 8.42, 7.71, 7.0, 8.13, 5.63],
[1.38, 3.29, 2.38, 2.85, 1.38, 1.77],
[1.31, 2.48, 1.04, 1.21, 1.83, 1.48],
[1.58, 8.19, 4.75, 3.38, 4.83, 1.46],
[4.48, 4.08, 4.13, 1.73, 1.37, 2.58], ];
变量行标签=[
“罗文”，
“第二排”，
“第三排”，
“第四排”，
“第五行”，
“第六行”，
];
变量列标签=[
“第一专栏”，
“第二栏”，
“第三纵队”，
“第四栏”，
“第五栏”，
“第六纵队”，
];
const mapData=data.reduce（（res、item、index）=>{
常量组=行标签[索引]；
item.forEach（（值，共索引）=>{
res.min=Math.min（值，res.min）；
res.max=数学max（值，res.max）；
push（{group，variable:columnLabels[colIndex]，value}）；
});
返回res；
}，{data:[]，min:Number.POSITIVE{无穷大，max:Number.NEGATIVE}）；
/*布局常数*/
var margin={top:0，right:0，bottom:90，left:80}，
宽度=960-margin.left-margin.right，
高度=600-margin.top-margin.bottom；
/*SVG图形的初始化*/
var svg=d3.选择（“容器”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//X比例和轴：
var x=d3.scaleBand（）
.范围（[0，宽度]）
.域（列标签）
.填充（0.01）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
.selectAll（“文本”）
.attr（“变换”、“平移（-10,10）旋转（-45）”）
.style（“文本锚定”、“结束”）
.style（“字体大小”，10）
//Y刻度和轴：
变量y=d3.scaleBand（）
.范围（[高度，0]）
.域（行标签）
.填充（0.01）；
svg.append（“g”）
.呼叫（d3.左（y））
var myColor=d3.scaleLinear（）
.范围（[“#0000ff”、“#00ff00”]）
.domain（[mapData.min，mapData.max]）
svg.selectAll（）
.data（mapData.data，函数（d）{return d.group+'：'+d.variable；}）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{return x（d.group）}）
.attr（“y”，函数（d）{返回y（d.variable）}）
.attr（“宽度”，x.带宽（））
.attr（“高度”，y.带宽（））
.style（“fill”，函数（d）{return myColor（d.value）}）