英文:
Creating a legend for a scatter plot in D3
问题
我已经编写了以下代码片段来创建散点图的图例。
基本上，这是一个简单的示例，使用Susie Lu的D3图例模块来为散点图创建图例。
然而，网页上什么都没有显示...
我漏掉了什么？我做错了什么？
我的HTML代码：
<html>
<head>
<title>D3图例</title>
<link rel="stylesheet" href="style-sheet.css">
</head>
<body>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
<script src="data-script.js"></script>
<svg id="scatterplot"></svg>
<div id="legend"></div>
</body>
</html>
我的CSS代码：
#legend {
font-family: Arial, sans-serif;
font-size: 12px;
}
我的JavaScript代码：
// 设置散点图。
var margin = { top: 20, right: 20, bottom: 30, left: 40 };
var width = 600 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var x = d3.scaleLinear()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var color = d3.scaleSequential(d3.interpolateViridis);
var svg = d3.select("#scatterplot")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv").then(function (data, error) {
if (error) throw error;
data.forEach(function (d) {
d.x = +d.x;
d.y = +d.y;
});
x.domain(d3.extent(data, function (d) { return d.x; })).nice();
y.domain(d3.extent(data, function (d) { return d.y; })).nice();
color.domain(d3.extent(data, function (d) { return d.z; }));
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function (d) { return x(d.x); })
.attr("cy", function (d) { return y(d.y); })
.style("fill", function (d) { return color(d.z); });
// 设置图例。
var legend = d3.legendColor()
.labelFormat(d3.format(".2f"))
.title("Z值")
.scale(color);
svg.append("g")
.attr("class", "legend")
.call(legend);
});
请注意，我已将HTML代码中的<和>替换为实际的尖括号以使代码片段有效。此外，我还将"Z Value"翻译为"Z值"以匹配中文。
英文:
I have written the following code snippets to create a legend for a scatter plot.
Basically, it is a simple example that uses Susie Lu's D3-legend module to create a legend for a scatter plot.
The webpage, however, shows nothing...
What am I missing? What am I doing wrong?
my HTML code:
<html>
<head>
<title>D3 Legend</title>
<link rel="stylesheet" href="style-sheet.css">
</head>
<body>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
<script src="data-script.js"></script>
<svg id="scatterplot"></svg>
<div id="legend"></div>
</body>
</html>
my CSS code:
#legend {
font-family: Arial, sans-serif;
font-size: 12px;
}
my JavaScript code:
// Set up the scatter plot.
var margin = { top: 20, right: 20, bottom: 30, left: 40 };
var width = 600 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var x = d3.scaleLinear()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var color = d3.scaleSequential(d3.interpolateViridis);
var svg = d3.select("#scatterplot")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv").then(function (data, error) {
if (error) throw error;
data.forEach(function (d) {
d.x = +d.x;
d.y = +d.y;
});
x.domain(d3.extent(data, function (d) { return d.x; })).nice();
y.domain(d3.extent(data, function (d) { return d.y; })).nice();
color.domain(d3.extent(data, function (d) { return d.z; }));
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function (d) { return x(d.x); })
.attr("cy", function (d) { return y(d.y); })
.style("fill", function (d) { return color(d.z); });
// Set up the legend.
var legend = d3.legendColor()
.labelFormat(d3.format(".2f"))
.title("Z Value")
.scale(color);
svg.append("g")
.attr("class", "legend")
.call(legend);
});
答案1
得分: 1
这是您的“legend”选择器。在您的CSS代码中，您使用 ".legend" 作为选择器，但在您的JavaScript代码中，您使用 "#legend" 作为选择器。
根据您的代码，似乎您没有正确调用legend函数。不应该调用 d3.select("#legend").append("svg")，而应该调用 svg.append("g") 将图例添加到与散点图相同的SVG元素中。
var margin = { top: 20, right: 20, bottom: 30, left: 40 };
var width = 600 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var x = d3.scaleLinear()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var color = d3.scaleSequential(d3.interpolateViridis);
var svg = d3.select("#scatterplot")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function (error, data) {
if (error) throw error;
data.forEach(function (d) {
d.x = +d.x;
d.y = +d.y;
});
x.domain(d3.extent(data, function (d) { return d.x; })).nice();
y.domain(d3.extent(data, function (d) { return d.y; })).nice();
color.domain(d3.extent(data, function (d) { return d.z; }));
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function (d) { return x(d.x); })
.attr("cy", function (d) { return y(d.y); })
.style("fill", function (d) { return color(d.z); });
// 设置图例。
var legend = d3.legendColor()
.labelFormat(d3.format(".2f"))
.title("Z Value")
.scale(color);
svg.append("g")
.attr("class", "legend")
.call(legend);
});
希望这对您有所帮助。
英文:
It is your legend selector. In your CSS code, you are using ".legend" as the selector, but in your JavaScript code, you are using "#legend" as the selector.
--Updated--
As your code, it seems that you are not calling the legend function properly. Instead of calling d3.select("#legend").append("svg"), you should call svg.append("g") to add the legend to the same SVG element as the scatter plot.
var margin = { top: 20, right: 20, bottom: 30, left: 40 };
var width = 600 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var x = d3.scaleLinear()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var color = d3.scaleSequential(d3.interpolateViridis);
var svg = d3.select("#scatterplot")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function (error, data) {
if (error) throw error;
data.forEach(function (d) {
d.x = +d.x;
d.y = +d.y;
});
x.domain(d3.extent(data, function (d) { return d.x; })).nice();
y.domain(d3.extent(data, function (d) { return d.y; })).nice();
color.domain(d3.extent(data, function (d) { return d.z; }));
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function (d) { return x(d.x); })
.attr("cy", function (d) { return y(d.y); })
.style("fill", function (d) { return color(d.z); });
// Set up the legend.
var legend = d3.legendColor()
.labelFormat(d3.format(".2f"))
.title("Z Value")
.scale(color);
svg.append("g")
.attr("class", "legend")
.call(legend);
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论