javascript - 带刻度轴和静态值

Question

我的视觉有一个scaleBandy 轴。我有一个包含类别的数据集，但这些类别不在观察级别，例如，如果附加圆圈我不能这样做：.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和其他填充设置，但我认为这不是一个好的长期解决方案。

标签： javascriptd3.js

Answer 1

在我看来，您在这里有两个问题：一个是关于如何使用您拥有的数据结构，另一个是关于规模。因为在同一个问题中提出不同的、不相关的问题在 SO 中是不受欢迎的，所以我将只回答规模问题：

您为任务使用了错误的比例，因为波段比例具有关联的带宽。改为使用点刻度：

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

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