gpt4 book ai didi

javascript - 如何在 D3/javascripts 中将一列绘制为 x 轴,另一列绘制为 y 轴

转载 作者:行者123 更新时间:2023-12-02 14:00:12 25 4
gpt4 key购买 nike

我想知道如何将一列(A)值散点到 x 轴,将另一列(B)值散点到 y 轴。每行在 A 列中可能有冗余值,但在 B 列中可能有不同的值。我想仅在 x 轴上绘制唯一值。
例如

A          B 
groupA 10
groupB 20
groupA 30
groupC 5
groupB 11

在 x 轴上,绘制组 A、B、C,无冗余。在 y 轴上,绘制属于每个组的每个值。但不是通过预先定义 A {groupA,groupB,groupC} 来手动设置 x 轴值,而是自动从 A 列读取观察值并将其保存到数组中并绘制它。谁能帮我开始这个?

谢谢

最佳答案

实现这一目标的最简单方法是设置两个刻度,一个用于 x 轴的序数刻度,例如 scalePoint ,以及 y 轴的一个线性刻度。

这是 x 比例:

var xScale = d3.scalePoint()
.domain(data.map(function(d){return d.A}))
.range([50, width-50])
.padding(0.5);

这是 y 比例:

var yScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d){return d.B})*1.1])
.range([height - 50, 10]);

这是一个演示:

var data = [{A: "groupA", B: 10},
{A: "groupB", B: 20},
{A: "groupA", B: 30},
{A: "groupC", B: 5},
{A: "groupB", B: 11}]

var width = 400, height = 200;

var svg = d3.selectAll("body")
.append("svg")
.attr("width", width)
.attr("height", height);

var color = d3.scaleOrdinal(d3.schemeCategory10)
.domain(data.map(function(d){return d.A}));

var xScale = d3.scalePoint()
.domain(data.map(function(d){return d.A}))
.range([50, width-50])
.padding(0.5);

var yScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d){return d.B})*1.1])
.range([height - 50, 10]);

var circles = svg.selectAll(".circles")
.data(data)
.enter()
.append("circle")
.attr("r", 8)
.attr("cx", function(d){ return xScale(d.A)})
.attr("cy", function(d){ return yScale(d.B)})
.attr("fill", function(d){ return color(d.A)});

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

svg.append("g").attr("transform", "translate(0,150)")
.attr("class", "xAxis")
.call(xAxis);

svg.append("g")
.attr("transform", "translate(50,0)")
.attr("class", "yAxis")
.call(yAxis);
<script src="https://d3js.org/d3.v4.min.js"></script>

PS:由于这里的一个尺度是序数(定性)的,因此从技术上讲,这不是散点图。

关于javascript - 如何在 D3/javascripts 中将一列绘制为 x 轴,另一列绘制为 y 轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40445440/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com