我想知道如何将一列(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:由于这里的一个尺度是有序的(定性的),所以从技术上讲,这不是一个散点图。