自定义Y轴标签并在d3中勾选

我正在与d3一起创建和svg，如下所示

// 1 DATA 
const data = [
{ "x": 50, "y": 0.10 },
{ "x": 100, "y": 0.15 },
{ "x": 150, "y": 0.25 },
{ "x": 200, "y": 0.35 },
{ "x": 250, "y": 0.45 },
{ "x": 300, "y": 0.55 },
{ "x": 350, "y": 0.65 },
{ "x": 400, "y": 0.75 },
{ "x": 450, "y": 0.85 },
{ "x": 500, "y": 0.87 },
{ "x": 550, "y": 0.92 },
{ "x": 600, "y": 0.98 }
]
height = 400,
width = 720;
padding = {
top: 70,
bottom: 50,
left: 70,
right: 70
}

const boundHeight = height - padding.top - padding.bottom;
const boundWidth = width - padding.right - padding.left;
// 2 CREATE SCALE 
const scaleY = d3.scaleLinear()
.range([boundHeight, 0])
.domain(d3.extent(data, d => d.y))
// 3 SVG
const svgns = 'http://www.w3.org/2000/svg'
const svg = d3.select('svg')
svg
.attr('xmlns', svgns)
.attr('viewBox', `0 0 ${width} ${height}`)
//create bound element
bound = svg.append('g')
.attr('class', 'bound')
.style('transform', `translate(${padding.left}px,${padding.top}px)`)

bound.append('g').attr('class', 'yAxis1')
.append('g').attr('class', 'yAxisLeft')
.call(d3.axisLeft(scaleY).tickSizeInner([(-(boundWidth))])
.tickFormat(d3.format(",.0%")))
console.log(d3.mean(data.map(d => d.y)))

<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<svg></svg>
<div id="container" class="svg-container"></div>
<script src="next.js"></script>

data.y=0.5724999999999999的mean。除了自动生成的y-axis标记和标签外，我如何将此值传递给轴生成器以为此创建label和tick。

获取刻度自动生成的刻度数组(scaleY.ticks())，将平均值添加到该数组并将其传递给axis.tickValues:

.tickValues(scaleY.ticks().concat(mean))

修改后的代码如下:

////////////////////////////////////////////////////////////
//////////////////////// 1 DATA ///////////////////////////
////////////////////////////////////////////////////////////
const data = [{
"x": 50,
"y": 0.10
},
{
"x": 100,
"y": 0.15
},
{
"x": 150,
"y": 0.25
},
{
"x": 200,
"y": 0.35
},
{
"x": 250,
"y": 0.45
},
{
"x": 300,
"y": 0.55
},
{
"x": 350,
"y": 0.65
},
{
"x": 400,
"y": 0.75
},
{
"x": 450,
"y": 0.85
},
{
"x": 500,
"y": 0.87
},
{
"x": 550,
"y": 0.92
},
{
"x": 600,
"y": 0.98
}

]
height = 400,
width = 720;
padding = {
top: 70,
bottom: 50,
left: 70,
right: 70
}

const boundHeight = height - padding.top - padding.bottom;
const boundWidth = width - padding.right - padding.left;
////////////////////////////////////////////////////////////
//////////////////////// 2 CREATE SCALE ////////////////////
////////////////////////////////////////////////////////////
const scaleY = d3.scaleLinear()
.range([boundHeight, 0])
.domain(d3.extent(data, d => d.y))
////////////////////////////////////////////////////////////
//////////////////////// 3 SVG// ///////////////////////////
////////////////////////////////////////////////////////////
const svgns = 'http://www.w3.org/2000/svg'
const svg = d3.select('svg')
svg
.attr('xmlns', svgns)
.attr('viewBox', `0 0 ${width} ${height}`)
//create bound element
bound = svg.append('g')
.attr('class', 'bound')
.style('transform', `translate(${padding.left}px,${padding.top}px)`)
const mean = d3.mean(data.map(d => d.y));
bound.append('g').attr('class', 'yAxis1')
.append('g').attr('class', 'yAxisLeft')
.call(d3.axisLeft(scaleY)
.tickValues(scaleY.ticks().concat(mean))
.tickSizeInner([(-(boundWidth))])
.tickFormat(d3.format(",.0%")))

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
<svg>
</svg>
<div id="container" class="svg-container"></div>
<script src="next.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：