css 在D3中创建散点图图例

3phpmpom 于 2023-03-14 发布在其他

关注(0)|答案(1)|浏览(139)

我编写了以下代码片段来创建散点图的图例。
基本上，这是一个使用Susie Lu的D3-legend模块为散点图创建图例的简单示例。
然而，网页上什么也没有显示...
我错过了什么？我做错了什么？

我的HTML代码：

<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>

我的CSS代码：

#legend {
    font-family: Arial, sans-serif;
    font-size: 12px;
}

我的JavaScript代码：

// 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);
});

css

来源：https://stackoverflow.com/questions/75710914/creating-a-legend-for-a-scatter-plot-in-d3

1条答案

按热度按时间

vql8enpb1#

它是legend选择器，在CSS代码中，您使用**".legend”作为选择器，但在JavaScript代码中，您使用"#legend”**作为选择器。

----更新----

在您的代码中，您似乎没有正确调用legend函数，您应该调用svg.append("g")将legend添加到散点图所在的SVG元素中，而不是调用d3.select("#legend").append("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); });

    // 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);
});

赞(0）回复(0）举报 2023-03-14

我来回答

css 在D3中创建散点图图例

1条答案

相关问题

热门标签

最新问答