javascript - 为什么 yAxisBar 没有显示正确的数据,D3
问题描述
我用 d3 创建了一个简单的条形图。但是 Axis Bar 中的 Y 数组没有正确显示所有数据项。
我需要最后显示的数据项是“29”,而不是“28”。因为在我的情况下,“28”显示为最后一项。
我应该添加或更改什么来解决此问题?
这就是我创建“Y 比例”的方式
var yMax = d3.max(data, data => data.devices);
const y = d3.scaleLinear()
.domain([0, yMax])
.range([height, margin.top])
const yAxis = d3.axisLeft()
.scale(y)
这是我的代码
var data1 = [
{flavor: 'group 1', devices: 29},
{flavor: 'group 2', devices: 15},
{flavor: 'group 3', devices: 6},
{flavor: 'group 4', devices: 23},
{flavor: 'group 5', devices: 17},
{flavor: 'group 6', devices: 5},
{flavor: 'group 7', devices: 14},
{flavor: 'group 8', devices: 13},
{flavor: 'group 9', devices: 19}
];
const devicesByFlavor = (data) => {
var colors = ["#49D490", "#F77C7C", "#249AFF", "#EFB93F", "#FB88AF", "#76D3C1", "#94D6FF", "#D073E0", "#CFDCE5", 'dodgerblue', 'dodgerblue'];
var width = 900,
height = 300;
var margin = {
top: 55,
left: 50,
right: 50,
bottom: 20
}
const svgChart = d3
.select('div#chart-container')
.append('svg')
.attr('class', 'barChart')
.attr('preserveAspectRatio', 'xMinYMin meet')
.attr('viewBox', '0 0 885 350')
// XXXXXXXXXXXXXXXXXXXXX
const xScale = d3.scaleBand()
.domain(data.map(data => data.flavor))
.range([margin.left, width - margin.right])
.padding(0.9)
const xAxis = d3.axisBottom()
.scale(xScale)
// YYYYYYYYYYYYYYYYYYYYY
var yMax = d3.max(data, data => data.devices)
const yScale = d3.scaleLinear()
.domain([0, yMax])
.range([height, margin.top])
const yAxis = d3.axisLeft()
.scale(yScale)
const rectBars = svgChart.selectAll('g')
const bar = rectBars.data(data).enter()
//Append xAxis
var xAxisBar = svgChart
.append('g')
.attr('class', 'x-axis')
.call(xAxis)
.attr('transform', 'translate(0,' + height + ')')
var xAxisBarPath = xAxisBar.select('path')
.attr('stroke', 'lightgray')
var xAxisBarText = xAxisBar.selectAll('text')
.attr('fill', (d, i) => colors[i])
var xAxisBarLine = xAxisBar.selectAll('line')
.attr('stroke', 'transparent')
//Add Extra Legend
var extraLegend = d3.selectAll('.tick')
.data(data)
.append('text')
.text((d) => {
return `${d.devices} devices`
})
.attr('fill', 'black')
.attr('transform', 'translate(0 , 30)')
.attr('font-size', '12')
//Append yAxis
var yAxisBar = svgChart
.append('g')
.attr('class', 'y-axis')
.attr('transform', `translate(${margin.left}, 0)`)
.call(yAxis)
const yAxisGrid = d3.axisLeft(yScale).tickFormat('').tickSize(100 - width)
svgChart.append('g')
.attr('class', 'y-axis-gridLine')
.attr('transform', `translate(${margin.left},0)`)
.call(yAxisGrid)
//Append bars
bar
.append('rect')
.attr('class', 'bar')
.attr('width', xScale.bandwidth())
.attr('x', d => xScale(d.flavor))
.attr('y', d => yScale(0))
.attr('height', d => height - yScale(0))
.attr('fill', (d, i) => colors[i])
bar
.selectAll('rect')
.transition()
.duration(800)
.attr("y", function (d) { return yScale(d.devices) })
.attr("height", function (d) { return height - yScale(d.devices) })
.delay(function (d, i) { return (i * 100) })
}
devicesByFlavor(data1)
解决方案
添加nice()
到您的 y 刻度:
const yScale = d3.scaleLinear()
.domain([0, yMax])
.range([height, margin.top])
.nice()
推荐阅读
- android - Android:意图过滤器路径模式和主机
- c# - 由 ref 传递给 void 函数的模板结构
- mysql - 与“%”一起使用时,对文本值使用 BETWEEN 的查询是排他的?
- python - Pytorch:LSTM 不学习
- php - 获取 Instagram 帖子的 JSON
- dictionary - 字典中的模糊
- python - kivmob 不会在 Android 应用程序 python kivy 中显示广告
- python - 填写表单 Selenium Python,接收弹出消息并清除填充循环
- jmeter - Jmeter - 当 csv 值为空时,跳过填充参数/值
- python-3.x - 在熊猫中剪辑具有特定条件的值