Javascript 为什么yAxisBar没有显示正确的数据,D3
我用d3创建了一个简单的条形图。 但轴栏中的Y数组未正确显示所有数据项 我需要最后显示的数据项是“29”,而不是“28”。因为在我的例子中,“28”是最后一项 我应该添加或更改什么来解决此问题 这就是我创建“Y比例”的方式Javascript 为什么yAxisBar没有显示正确的数据,D3,javascript,d3.js,Javascript,D3.js,我用d3创建了一个简单的条形图。 但轴栏中的Y数组未正确显示所有数据项 我需要最后显示的数据项是“29”,而不是“28”。因为在我的例子中,“28”是最后一项 我应该添加或更改什么来解决此问题 这就是我创建“Y比例”的方式 var yMax = d3.max(data, data => data.devices); const y = d3.scaleLinear() .domain([0, yMax]) .range([height, margin.to
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()