如何在 D3 中绘制散点图？

Question

我有一系列成对的 xy 坐标，可以创建 58 条线。我想将它们绘制在笛卡尔图上，两个轴上的值都在 -5 到 5 之间，本质上是绘制散点图。我使用 quiver 函数在 matplotlib 中做了类似的事情，但我希望能够在 D3 中做到这一点。我还希望能够标记每一行，或者满足长度阈值的每一行。我在下面提出的代码。谢谢

var lisa = [["Eloy",0.0169808,-0.695317,-0.0510301,-0.6995938],
["Florence",-0.3465685,-0.6790588,-0.5869514,-0.6762134],
["Phoenix",0.677068,-0.5754814,-0.6052215,-0.6158059],
["Tucson",-0.663848,0.4111043,-0.6722116,0.011639]]

var w = 200;
var h = 200;
//create the svg element and set the height and width parameters
var svg =  d3.select("div").select("div")
    .append("svg")
    .attr("height",h)
    .attr("width", w)
    .style("border", "1px solid black");

//Create the scale for the scatter plot
var xScale = d3.scale.linear()
    .domain([d3.min(dataset, function(d) { return d[0];}),d3.max(dataset, function(d) { return d[0];})])
    .range([-1,1]);
var yScale = d3.scale.linear()
    .domain([d3.min(dataset, function(d) { return d[1];}),d3.max(dataset, function(d) { return d[1];})])
    .range([-1,1]);

//This is the function that creates the SVG lines
var line = svg.selectAll("line")
    .data(lisa)
    .enter()
    .append("line");

//This gets the cooresponding x,y cordinates from the dataset
line.attr("x1", function(d) {
    return xScale(d[0]);
})
.attr("y1", function(d) {
    return yScale(d[1]);
})
.attr("x2", function(d) {
    return xScale(d[2]);
})
.attr("y2", function(d) {
    return yScale(d[3]);
})
.attr("stroke", "black");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 1

您的代码有一些问题：

首先，您现在的范围 ([-1, 1]) 毫无意义。这应该是域（我将范围更改为 [0, w] 和 [0, h]）。

在你的真实代码中，域应该是 [-5, 5] 并且范围应该是绘图的限制，比如 [leftLimit, rightLimit] 和 [topLimit, bottomLimit]（请记住，在一个 SVG，y 轴的 0 位置是顶部，而不是底部）。

其次，给定这个数组：

["Tucson",-0.663848,0.4111043,-0.6722116,0.011639]

您的 x 和 y 位置应该是索引 1、2、3 和 4，而不是 0、1、2 和 3。

除此之外，我还添加了标签：

var text = svg.selectAll(".text")
    .data(dataset)
    .enter()
    .append("text");

text.attr("font-size", 10)
    .attr("x", function(d) {
        return xScale(d[1]);
    })
    .attr("y", function(d) {
        return yScale(d[2]);
    })
    .text(d => d[0]);

这是经过更正的演示：

var dataset = [["Eloy",0.0169808,-0.695317,-0.0510301,-0.6995938],
["Florence",-0.3465685,-0.6790588,-0.5869514,-0.6762134],
["Phoenix",0.677068,-0.5754814,-0.6052215,-0.6158059],
["Tucson",-0.663848,0.4111043,-0.6722116,0.011639]];

var color = d3.scale.category10();

var w = 400;
var h = 300;
//create the svg element and set the height and width parameters
var svg =  d3.select("body")
    .append("svg")
    .attr("height",h)
    .attr("width", w)
    .style("border", "1px solid black");

//Create the scale for the scatter plot
var xScale = d3.scale.linear()
    .domain([-1,1])
    .range([0,w]);
var yScale = d3.scale.linear()
    .domain([-1,1])
    .range([0,h]);

//This is the function that creates the SVG lines
var line = svg.selectAll("line")
    .data(dataset)
    .enter()
    .append("line");

//This gets the cooresponding x,y cordinates from the dataset
line.attr("x1", function(d) {
    return xScale(d[1]);
})
.attr("y1", function(d) {
    return yScale(d[2]);
})
.attr("x2", function(d) {
    return xScale(d[3]);
})
.attr("y2", function(d) {
    return yScale(d[4]);
})
.attr("stroke-width", 2)
.attr("stroke", (d,i)=>color(i));

var text = svg.selectAll(".text")
    .data(dataset)
    .enter()
    .append("text");

text.attr("font-size", 10)
.attr("x", function(d) {
    return xScale(d[1])+2;
})
.attr("y", function(d) {
    return yScale(d[2]) + 4;
})
.text(d=>d[0]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

如何在 D3 中绘制散点图？

How do I make a scatter plot of lines in D3?

javascript

d3.js

graph

line

scatter-plot