Question

我想知道如何将一列（A）值绘制到x轴而将另一列（B）散布到y轴。每行可以在A列中具有冗余值，但在B列中具有不同的值。我想仅在x轴上绘制唯一值。
e.g。

<div class="navbar">
  Your Navbar
</div>
<div class="contents-under">
  some contents under navbar
</div>

在x轴上，绘制组A，B，C没有冗余。在y轴上，绘制每个值属于每个组。但不是通过预先定义A {groupA，groupB，groupC}手动设置x轴值，而是自动从A列读取观察值并保存到数组中并绘制它。任何人都可以帮助我从这开始吗？

感谢，

Answer 1

实现此目的的最简单方法是设置两个刻度，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]);

这是一个演示：

＆＃13;

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

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

PS：因为这里的一个比例是序数（定性），所以这在技术上不是散点图。

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

1 个答案: