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]);

以下是带有更正的演示：

＆＃13;

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]);

＆＃13;

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

＆＃13;

如何在D3中制作线条的散点图？

1 个答案: