带刻度轴和静态值

Question

我的视觉对象的y轴有一个scaleBand。我有一个包含类别的数据集，但是这些类别不在观察级别上，因此，例如，如果追加圆，我就不能这样做：.attr('cy', function(d) {return yScale(???)}) ???表示我没有任何东西观测级别的数据可以分解。相反，如果这是它的正确名称，则需要在数据标签级别进行拆分。这是代码的相关部分：

var margins = {top:20, left:100, bottom:20, right:20};

var width = 800;
var height = 500;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
    .append('svg')
    .attr('width', totalWidth)
    .attr('height', totalHeight);

var graphGroup = svg.append('g')
    .attr('transform', "translate("+margins.left+","+margins.top+")");

var xScale = d3.scaleLinear()
    .range([0, width]);

var yScale = d3.scaleBand()
    .rangeRound([height,0])
    .padding(.1)
    .paddingInner(.2);

var colorScale = d3.scaleOrdinal()
    .range(["#003366","#366092","#4f81b9","#95b3d7","#b8cce4","#f6d18b","#e4a733","#a6a6a6","#d9d9d9","#ffffcc","#b29866"]);

  var data = [
   {'fmc':'GF', 'aum':66.88, 'aumxmmf':27.62},
   {'fmc':'Ping An', 'aum':41.8, 'aumxmmf':10.76},
   {'fmc':'Southern', 'aum':80.25, 'aumxmmf':27.47}
];

var xMin = d3.min(data, function(d) {return d.aum});
var xMax = d3.max(data, function(d) {return d.aum});

var fundTypes = ['aum', 'aumxmmf'];

xScale.domain([xMin, xMax]);
yScale.domain(fundTypes);

graphGroup.append('g')
    .attr('class', 'x axis')
    .attr('transform', "translate("+0+","+height+")")
    .call(d3.axisBottom(xScale))
    .selectAll('text');

graphGroup.append('g')
    .attr('class', 'y axis')
    .call(d3.axisRight(yScale))
    .selectAll('text')
    .attr("transform", "translate(-40,0)");

var aumCircles = graphGroup.selectAll('.aumCirc')
.data(data)
.enter()
.append('circle')
.attr('class','aumCirc')
.attr('cx', function(d) {return xScale(d.aum)})
.attr('cy', yScale('aum'))
.attr('r', 4)
.style('fill', function(d) {return colorScale(d.fmc)});

var aumxmmfCircles = graphGroup.selectAll('.aumxmmfCirc')
.data(data)
.enter()
.append('circle')
.attr('class', 'aumxmmfCirc')
.attr('cx', function(d) {return xScale(d.aumxmmf)})
.attr('cy', yScale('aumxmmf'))
.attr('r',4)
.style('fill', function(d) {return colorScale(d.fmc)});

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

虽然未引发任何错误，但结果却不是我所期望的：圆圈被附加在yAxis上两个刻度线的中间。

问题

为什么这是scaleBand的默认行为？不应该在静态值上调用轴（例如'aum'仍然导致与刻度线一致吗？我不明白为什么我将轴称为刻度线在一个位置，但是当我调用再次使轴处于一个完全不同的位置。

• 我断定问题不是由于故障排除中的g组错误
• 虽然我可以对.paddingInner和其他填充设置使用试错法，但是我认为这不是一个好的长期解决方案。

Answer 1

在我看来，您在这里有两个问题：一个是关于如何使用现有数据结构的问题，另一个是关于规模的问题。因为在S.O.上，在同一问题中询问不同的，无关的问题是很不容易的，所以我只回答规模问题：

您正在使用错误的缩放比例，因为波段比例具有关联的带宽。改用磅秤：

class Point:
  def __init__(self, x, y):
    self.x = x
    self.y = y

  def slope_from_origin (self,p1,p2):
      slope=((p2.y-p1.y)/(p2.x-p1.x))
      return Point(slope)

  def __str__ (self):
      return str(slope)

p=Point(6,7)
q=Point(3,4)
print(p.slope_from_origin(q))

这是您所做的更改的代码：

var yScale = d3.scalePoint()
    //etc...

var margins = {top:20, left:100, bottom:20, right:20};

var width = 800;
var height = 500;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
    .append('svg')
    .attr('width', totalWidth)
    .attr('height', totalHeight);

var graphGroup = svg.append('g')
    .attr('transform', "translate("+margins.left+","+margins.top+")");

var xScale = d3.scaleLinear()
    .range([0, width]);

var yScale = d3.scalePoint()
    .rangeRound([height,0])
    .padding(.2);

var colorScale = d3.scaleOrdinal()
    .range(["#003366","#366092","#4f81b9","#95b3d7","#b8cce4","#f6d18b","#e4a733","#a6a6a6","#d9d9d9","#ffffcc","#b29866"]);

  var data = [
   {'fmc':'GF', 'aum':66.88, 'aumxmmf':27.62},
   {'fmc':'Ping An', 'aum':41.8, 'aumxmmf':10.76},
   {'fmc':'Southern', 'aum':80.25, 'aumxmmf':27.47}
];

var xMin = d3.min(data, function(d) {return d.aum});
var xMax = d3.max(data, function(d) {return d.aum});

var fundTypes = ['aum', 'aumxmmf'];

xScale.domain([xMin, xMax]);
yScale.domain(fundTypes);

graphGroup.append('g')
    .attr('class', 'x axis')
    .attr('transform', "translate("+0+","+height+")")
    .call(d3.axisBottom(xScale))
    .selectAll('text');

graphGroup.append('g')
    .attr('class', 'y axis')
    .call(d3.axisRight(yScale))
    .selectAll('text')
    .attr("transform", "translate(-40,0)");

var aumCircles = graphGroup.selectAll('.aumCirc')
.data(data)
.enter()
.append('circle')
.attr('class','aumCirc')
.attr('cx', function(d) {return xScale(d.aum)})
.attr('cy', yScale('aum'))
.attr('r', 4)
.style('fill', function(d) {return colorScale(d.fmc)});

var aumxmmfCircles = graphGroup.selectAll('.aumxmmfCirc')
.data(data)
.enter()
.append('circle')
.attr('class', 'aumxmmfCirc')
.attr('cx', function(d) {return xScale(d.aumxmmf)})
.attr('cy', yScale('aumxmmf'))
.attr('r',4)
.style('fill', function(d) {return colorScale(d.fmc)});